<template>
	<view class="createVideo" :style="{ 'padding-top': keyboardH == 0 ? '0' : inf0Pt + 'vh', height: webStyle.height }">
		<image class="back--btn" v-if="keyboardH == 0" @click="back" :src="imgPath + 'AICont/back-arrow.svg'" mode="widthFix"></image>
		<view class="title-box" :style="{ 'padding-top': inf0Pt + 'vh' }" v-if="0">
			<template v-if="keyboardH == 0">
				<image class="back" @click="back" :src="imgPath + 'AICont/back-arrow.svg'" mode="widthFix"></image>
				<view class="title">AI口播</view>
				<view class="back"></view>
			</template>
		</view>

		<view class="work-show" @tap.stop="workBoxTap" :style="{ width: '100vw', height: '56vh', position: keyboardH != 0 && ![6].includes(footerBarListAc) ? 'absolute' : 'relative', zIndex: keyboardH != 0 && ![6].includes(footerBarListAc) ? '-1' : '0' }">
			<canvas class="secne2CanvasPic-class" id="secne2CanvasPic" canvas-id="secne2CanvasPic" :style="{ width: showBoxStyle.width + 'vw', height: showBoxStyle.height + 'vw', opacity: '0' }"></canvas>
			<view class="show-box" v-if="changjing[changjingAc]" :style="{ width: showBoxStyle.width + 'vw', height: showBoxStyle.height + 'vw' }">
				<!-- #ifdef MP-WEIXIN -->
				<view
					class="show-item"
					v-for="(item, index) in changjing[changjingAc].scene2"
					:key="index"
					:style="{ width: item.w + 'px', height: item.h + 'px', top: item.y + 'px', left: item.x + 'px', zIndex: item.z, border: changjing[changjingAc].scene2Ac == index ? '1px solid #00deb9' : '', display: subtitlesShow || item.eleType != 'texts2' ? '' : 'none' }"
					@touchstart.prevent.stop.native="(event) => down_wx(event, item, index)"
					@touchmove.prevent.stop.native="(event) => move_wx(event, item, index)"
					@touchend.prevent.stop.native="(event) => up_wx(event, item, index)"
					@tap.stop=""
				>
					<image v-if="item.picSrc" class="pic" :src="item.picSrc" mode=""></image>
					<view
						class="renderText"
						v-if="['texts', 'texts2'].includes(item.eleType)"
						:style="{ fontSize: item.sand.fontsize + 'px', fontFamily: item.sand.fontFamily, color: item.sand.primaryColour, background: item.sand.bgStyle, '--stroke-width': item.sand.lineWidth + 'px', '--stroke-color': item.sand.strokeStyle }"
					>
						<view class="stroke-text">
							{{ item.content }}
						</view>
						<view :data-content="item.content" class="text">
							{{ item.content }}
						</view>
					</view>

					<!-- <video v-if="item.eleType == 'video'" class="video" :src="item.matterUrl"></video> -->
					<template v-if="changjing[changjingAc].scene2Ac == index">
						<view class="dot d1" data-classn="d1"></view>
						<view class="dot d2" data-classn="d2"></view>
						<view class="dot d3" data-classn="d3"></view>
						<view class="dot d4" data-classn="d4"></view>
					</template>
				</view>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view
					class="show-item"
					v-for="(item, index) in changjing[changjingAc].scene2"
					:key="index"
					:style="{ width: item.w + 'px', height: item.h + 'px', top: item.y + 'px', left: item.x + 'px', zIndex: item.z, border: changjing[changjingAc].scene2Ac == index ? '1px solid #00deb9' : '', display: subtitlesShow || item.eleType != 'texts2' ? '' : 'none' }"
					@touchstart.prevent.stop="(event) => down_web(event, item, index)"
					@touchmove.prevent.stop="(event) => move_web(event, item, index)"
					@touchend.prevent.stop="(event) => up_web(event, item, index)"
					@tap.stop=""
				>
					<image v-if="item.picSrc" class="pic" :src="item.picSrc" mode=""></image>
					<view
						class="renderText"
						v-if="['texts', 'texts2'].includes(item.eleType)"
						:style="{ fontSize: item.sand.fontsize + 'px', fontFamily: item.sand.fontFamily, color: item.sand.primaryColour, background: item.sand.bgStyle, '--stroke-width': item.sand.lineWidth + 'px', '--stroke-color': item.sand.strokeStyle }"
					>
						<view class="stroke-text">
							{{ item.content }}
						</view>
						<view :data-content="item.content" class="text">
							{{ item.content }}
						</view>
					</view>

					<!-- <video v-if="item.eleType == 'video'" class="video" :src="item.matterUrl"></video> -->
					<template v-if="changjing[changjingAc].scene2Ac == index">
						<view class="dot d1" data-classn="d1"></view>
						<view class="dot d2" data-classn="d2"></view>
						<view class="dot d3" data-classn="d3"></view>
						<view class="dot d4" data-classn="d4"></view>
					</template>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<view class="submit-btn" @tap="openPop" :style="{ 'margin-top': inf0Pt + 'vh' }" v-if="keyboardH == 0">
			<!-- <image class="icon" :src="imgPath + 'index/' + 'page3icon5.svg'" mode="heightFix"></image> -->
			<view class="text" style="color: #000; font-size: 4vw">{{ "导 出" }}</view>
		</view>
		<view class="bottom-view">
			<view class="time-box" v-if="keyboardH == 0">
				<view class="l">
					<image class="icon1" :src="imgPath + 'createAvatar/wang.png'" mode="widthFix"></image>
					<view class="text">00:00/{{ surplusTime || "00:00" }}</view>
					<view class="add-view" @tap="toBuyPage">
						<view class="add" v-if="companyName == '言影'">
							<image class="icon2" :src="imgPath + 'createAvatar/add.svg'" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="r">
					<checkbox-group @change="checkboxChange" style="display: flex" v-if="0">
						<label style="display: flex; justify-content: center; align-items: center; margin-left: 2vw">
							<checkbox value="bt" :checked="false" color="#000" style="transform: scale(0.7)" />
							<text>标题</text>
						</label>
					</checkbox-group>
					<checkbox-group @change="changeSubtitlesShow" style="display: flex">
						<label style="display: flex; justify-content: center; align-items: center; margin-left: 2vw">
							<checkbox value="zm" :checked="subtitlesShow" color="#000" style="transform: scale(0.7)" />
							<text>字幕</text>
						</label>
					</checkbox-group>
					<!-- <view class="text"></view> -->
					<!-- <switch class="switch" :checked="subtitlesShow" @change="changeSubtitlesShow" color="#00997f" style="transform: scale(0.7)" /> -->
					<!-- <image class="icon2" :src="imgPath + 'createAvatar/quan.svg'" mode="widthFix"></image> -->
				</view>
			</view>
			<scroll-view scroll-x v-if="keyboardH == 0 || true" :scroll-left="changjingListLeft" scroll-with-animation>
				<view class="changjing-list">
					<view :class="['changjing-item', changjingAc == changjingIndex ? 'ac' : '']" v-for="(changjingItem, changjingIndex) in changjing" :key="changjingIndex" @tap="changeChangjingAc(changjingItem, changjingIndex)">
						<view class="show-box" :style="{ width: showBoxStyle.width * changjingRate + 'vw', height: showBoxStyle.height * changjingRate + 'vw' }">
							<view class="show-item" v-for="(item, index) in changjingItem.scene2" :key="index" :style="{ width: item.w * changjingRate + 'px', height: item.h * changjingRate + 'px', top: item.y * changjingRate + 'px', left: item.x * changjingRate + 'px', zIndex: item.z }">
								<image class="pic" :src="item.picSrc" mode=""></image>
								<!-- <template v-if="changjingItem.scene2Ac == index">
										<view class="dot d1" data-classn="d1"></view>
										<view class="dot d2" data-classn="d2"></view>
										<view class="dot d3" data-classn="d3"></view>
										<view class="dot d4" data-classn="d4"></view>
									</template> -->
							</view>
						</view>
						<view class="del" v-if="changjing.length > 1" @tap.stop="delChangjing(changjingItem, changjingIndex)">
							<image :src="imgPath + 'createAvatar/changjing-del.svg'" mode="" class="del-icon"></image>
						</view>
					</view>
					<view class="changjing-item-add" @tap="addChangjing">
						<image class="icon" :src="imgPath + 'createAvatar/changjing-add.svg'" mode=""></image>
					</view>
				</view>
			</scroll-view>
			<view class="yuliao">
				<view class="page3-bottom" v-if="changjing[changjingAc]">
					<view class="page3-b-btns">
						<view class="l">
							<view :class="['btn', changjing[changjingAc].driveTypeInd == index ? 'ac' : '']" v-for="(item, index) in driveTypeList" :key="index" @tap="changeDriveTypeListInd(index)">
								<image class="icon" :src="imgPath + 'index/' + item.icon" mode=""></image>
								<view class="text">{{ item.text }}</view>
							</view>
						</view>
						<view class="r">
							<!-- <view class="btn ac" @tap="submit" style="background: linear-gradient(217.51deg, #00ffae 0%, #1ba1fa 100%)">
								<image class="icon" :src="imgPath + 'index/' + 'page3icon5.svg'" mode="heightFix"></image>
								<view class="text" style="color: #000;font-size: 4.6vw;">{{ "导 出" }}</view>
							</view> -->
						</view>
					</view>
					<view class="page3-b-btns" style="border-bottom: none" v-if="changjing[changjingAc].driveTypeInd == 0">
						<view class="r" style="justify-content: flex-start">
							<view class="btn" v-for="(item, index) in btnlist" :key="index" @tap="btnlistTap(item.fnName, item.args)">
								<image class="icon" :src="imgPath + 'index/' + item.icon" mode=""></image>
								<view class="text">{{ item.text }}</view>
							</view>
						</view>
					</view>
					<view class="cont" v-if="changjing[changjingAc].driveTypeInd == 0">
						<view class="textarea-box">
							<!-- #ifndef MP-WEIXIN -->
							<textarea class="cont-textarea" :adjust-position="false" :auto-blur="true" :value="changjing[changjingAc].content" :maxlength="contentLen" @blur="contentBlur" placeholder="请输入文案" @tap.stop="textareaTap" @input="contentWatch_web" @focus="contentFocus" />
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->
							<textarea class="cont-textarea" :adjust-position="false" :auto-blur="true" :value="changjing[changjingAc].content" :maxlength="contentLen" @blur="contentBlur" placeholder="请输入文案" @tap.stop="textareaTap" @input.native="contentWatch_wx" @focus="contentFocus" />
							<!-- #endif -->
							<view class="page3-b-btns" style="border-bottom: none; padding: 0; height: 9vw">
								<view class="r" style="justify-content: flex-start">
									<view class="btn" v-for="(item, index) in btnlist2" :key="index" @tap="btnlistTap(item.fnName, item.args)">
										<image class="icon" :src="imgPath + 'index/' + item.icon" mode="heightFix"></image>
										<view class="text">{{ item.text }}</view>
									</view>
								</view>
								<view class="number" v-if="1">{{ changjing[changjingAc].content.length }}/{{ contentLen }}</view>
							</view>
						</view>
					</view>
					<view class="cont" v-if="changjing[changjingAc].driveTypeInd == 1">
						<view v-if="audioContext && changjing[changjingAc].audioSrc" class="audio-box">
							<view class="audio-cont">
								<view class="info">
									<view class="name">{{ "录音文件.mp3" }}</view>
									<view class="time">{{ seconds2time(audioCurrentTime) }}/{{ seconds2time(changjing[changjingAc].audioDuration) }}</view>
								</view>
								<view class="btns">
									<view class="item del" @tap="delRecordingSrc">
										<image class="icon" :src="imgPath + 'index/del.svg'" mode="widthFix"></image>
									</view>
									<view class="item play" @tap="onPlayTap">
										<image class="icon" :src="imgPath + 'index/play' + (audioPlaying ? 'ing' : 'ed') + '_back.svg'" mode="widthFix"></image>
									</view>
								</view>
							</view>
							<view class="rate-box">
								<slider class="slider" :value="audioCurrentTime" :min="0" :max="changjing[changjingAc].audioDuration" disabled />
							</view>
						</view>
						<view v-else class="showRecordView" @tap="$refs.page3LuYin.open()">
							<image class="icon" :src="imgPath + 'index/add.svg'" mode="widthFix"></image>
							<view class="text">{{ "添加音频" }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="footer-bar" :style="{ display: footerBarShow && keyboardH == 0 ? '' : 'none' }">
				<view :class="['footer-bar-item', footerBarListAc == item.ac ? 'ac' : '']" :key="index" v-for="(item, index) in footerBarList.filter((e) => e.show)" @tap.stop="changeFooterBarListAc({ item, index })">
					<image mode="" class="icon" :src="imgPath + 'createAvatar/footer-icon/' + item.icon + (footerBarListAc == item.ac ? '-ac' : '') + '.svg'"></image>
					<view class="text">{{ item.text }}</view>
				</view>
			</view>
		</view>
		<view class="toMakeAvatar" @tap="toMakeAvatar" v-show="keyboardH == 0">
			<image class="pic" :src="imgPath + 'index/toMakeAvatar.svg'" mode="widthFix"></image>
		</view>
		<view
			class="getFontSizeView"
			:data-content="getFontSizeVal"
			:style="{ fontSize: getFontSizeStyle.fontSize + 'px', fontFamily: getFontSizeStyle.fontFamily, color: getFontSizeStyle.color, background: getFontSizeStyle.background, '--stroke-width': getFontSizeStyle.strokeWidth, '--stroke-color': getFontSizeStyle.strokeColor }"
		>
			{{ getFontSizeVal }}
		</view>

		<LoginDialog ref="LoginDialog" :show="LoginDialogShow" @successFn="loginDialogShowSucc" @changeShow="changeLoginDialogShow" style="z-index: 999"></LoginDialog>
		<view style="position: relative; z-index: 999;width: 100vw;height: 100vh;left: 0;top: 0;" v-if="pageLoading">
			<PageLoading :tips="pageLoadingTips"></PageLoading>
		</view>

		<uni-popup ref="myDialogPopup" :safe-area="footerBarListAc == 6" type="bottom" background-color="none" border-radius="3vw 3vw 0 0" style="z-index: 9999" @change="changeMyDialogPopupShow">
			<view class="page3popup-view">
				<view class="popup-title" v-if="footerBarList.find((e) => footerBarListAc == e.ac) && ![6, 9].includes(footerBarListAc)">选择{{ footerBarList.find((e) => footerBarListAc == e.ac).text }}</view>
				<view class="popup-main" style="height: auto" v-if="!!userInfo.token && changjing[changjingAc]">
					<PickSpeaker
						v-show="footerBarListAc == 7"
						@changeSpeed="changeContentSpeed"
						@changePitch="changeContentPitch"
						@changeVolume="changeContentVolume"
						@pickSpeaker="pickContentSpeaker"
						@removeSpeaker="removeContentSpeaker"
						:selectItem="changjing[changjingAc].speaker"
						:content="changjing[changjingAc].content"
						:show="myDialogPopupShow"
						ref="PickSpeaker"
					></PickSpeaker>
					<PickAvatar
						v-show="footerBarListAc == 1"
						@pickAvatar="pickAvatar"
						@removeAvatar="removeAvatar"
						@changeZIndex="changeZIndex"
						:show="myDialogPopupShow"
						:currInd="changjing[changjingAc].scene2Ac"
						:scene2="changjing[changjingAc].scene2"
						:pageItem="footerBarList[footerBarList.findIndex((e) => e.ac == footerBarListAc)]"
						ref="PickAvatar"
					></PickAvatar>
					<PickBgi
						v-show="footerBarListAc == 2"
						@pickBgi="pickBgi"
						@removeEl="removeEl"
						@changeZIndex="changeZIndex"
						:show="myDialogPopupShow"
						:currInd="changjing[changjingAc].scene2Ac"
						:scene2="changjing[changjingAc].scene2"
						:pageItem="footerBarList[footerBarList.findIndex((e) => e.ac == footerBarListAc)]"
						:chicunAc="chicunAc"
						:chicunList="chicunList"
						ref="PickBgi"
					></PickBgi>
					<PickPicture
						v-show="footerBarListAc == 3"
						@pickPicture="pickPicture"
						@removeEl="removeEl"
						@changeZIndex="changeZIndex"
						:show="myDialogPopupShow"
						:currInd="changjing[changjingAc].scene2Ac"
						:scene2="changjing[changjingAc].scene2"
						:pageItem="footerBarList[footerBarList.findIndex((e) => e.ac == footerBarListAc)]"
						:chicunAc="chicunAc"
						:chicunList="chicunList"
						ref="PickPicture"
					></PickPicture>
					<PickMusic
						v-show="footerBarListAc == 4"
						@pickMusic="pickMusic"
						@removeMusic="removeMusic"
						@changeElVolume="changeElVolume"
						:show="myDialogPopupShow"
						:pageShow="pageShow"
						:pageItem="footerBarList[footerBarList.findIndex((e) => e.ac == footerBarListAc)]"
						:selectItem="changjing[changjingAc].bgm"
						:volume="changjing[changjingAc].bgm ? changjing[changjingAc].bgm.volume : 50"
						ref="PickMusic"
					></PickMusic>
					<PickVideo
						v-show="footerBarListAc == 5"
						@pickVideo="pickVideo"
						@removeEl="removeEl"
						@changeZIndex="changeZIndex"
						@changeElVolume="changeElVolume"
						:show="myDialogPopupShow"
						:currInd="changjing[changjingAc].scene2Ac"
						:scene2="changjing[changjingAc].scene2"
						:volume="changjing[changjingAc].scene2[changjing[changjingAc].scene2Ac] ? changjing[changjingAc].scene2[changjing[changjingAc].scene2Ac].volume : 50"
						:pageItem="footerBarList[footerBarList.findIndex((e) => e.ac == footerBarListAc)]"
						:chicunAc="chicunAc"
						:chicunList="chicunList"
						ref="PickVideo"
					></PickVideo>
					<PickText
						v-show="footerBarListAc == 6"
						@changeValue="addText"
						@blurValue="blurText"
						@removeEl="removeEl"
						@changeZIndex="changeZIndex"
						@focusValue="focusText"
						@changeFont="changeFont"
						@tapIpt="tapTextIpt"
						@close="closeSomeComp"
						:show="myDialogPopupShow"
						:currInd="changjing[changjingAc].scene2Ac"
						:scene2="changjing[changjingAc].scene2"
						:pageItem="footerBarList[footerBarList.findIndex((e) => e.ac == footerBarListAc)]"
						ref="PickText"
					></PickText>
					<PickSubtitles
						v-show="footerBarListAc == 9"
						@changeValue="addText"
						@blurValue="blurText"
						@changeZIndex="changeZIndex"
						@removeEl="removeEl"
						@focusValue="focusText"
						@changeFont="changeFont"
						@close="closeSomeComp"
						:show="myDialogPopupShow"
						:currInd="changjing[changjingAc].scene2Ac"
						:scene2="changjing[changjingAc].scene2"
						:pageItem="footerBarList[footerBarList.findIndex((e) => e.ac == footerBarListAc)]"
						ref="PickSubtitles"
					></PickSubtitles>
					<PickTemplate v-show="footerBarListAc == 8" @tap.stop="" @pickTemplate="showConfirmDialogOpt1" :show="myDialogPopupShow" :chicunAc="chicunAc" :chicunList="chicunList" :pageItem="footerBarList[footerBarList.findIndex((e) => e.ac == footerBarListAc)]"></PickTemplate>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="page3LuYin" type="bottom" background-color="#222224" border-radius="3vw 3vw 0 0" style="z-index: 9999" @change="changePage3LuYinShow">
			<LuYin ref="LuYin" :show="page3LuYinShow" @close="$refs.page3LuYin.close()" :isLoop="true" @join="page3AddAudioSrc"></LuYin>
		</uni-popup>

		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="视频名称" :value="daochuForm.videoName" placeholder="请输入视频名称" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="buyPopup" type="dialog">
			<uni-popup-dialog mode="base" title="温馨提示" :confirmText="companyName != '言影' ? '确定' : systemInfo.platform === 'ios' || (systemInfo.system && systemInfo.system.includes('OS')) ? '联系客服' : '购买vip'" :showClose="true" @confirm="toBuyPage('buyPopup')">
				<view class="tips" style="color: #000">克隆次数不足！</view>
			</uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="buyPopup2" type="dialog">
			<uni-popup-dialog mode="base" title="温馨提示" :confirmText="companyName != '言影' ? '确定' : systemInfo.platform === 'ios' || (systemInfo.system && systemInfo.system.includes('OS')) ? '联系客服' : '购买vip'" :showClose="true" @confirm="toBuyPage('buyPopup')">
				<view class="tips" style="color: #000">开通会员畅享AI爆款文案无限制作</view>
			</uni-popup-dialog>
		</uni-popup>

		<ConfirmDialog ref="confirmDialog1" :dialogShow="confirmDialogOpt1.dialogShow" :title="confirmDialogOpt1.title" :cont="confirmDialogOpt1.cont" :btns="confirmDialogOpt1.btns" @cancel="confirmDialogOpt1Cancel" @confirm="confirmDialogOpt1Confirm"></ConfirmDialog>

		<view class="getFrame" v-if="0">
			<view class="item" v-for="(item, index) in getFrameList" :key="item.No">
				<video class="getFrameVideo" autoplay="" loop="" :controls="true" @timeupdate="(event) => getFrameVideoPlay(event, item, index)" :id="'getFrameVideo' + item.No" :src="item.videoSrc" :muted="true"></video>
				<canvas class="getFrameCtx" :id="'getFrameCtx' + item.No" :canvas-id="'getFrameCtx' + item.No"></canvas>
			</view>
		</view>
	</view>
</template>

<script>
import { tools } from "@/utils/util.js";
import myRequest, * as request from "@/utils/api.js";
import * as api from "@/api/createVideo.js";

import ConfirmDialog from "@/components/confirm-dialog/confirm-dialog.vue";
import PageLoading from "@/components/PageLoading/PageLoading.vue";
import LuYin from "./components/LuYin/LuYin.vue";
import PickSpeaker from "./components/PickSpeaker/PickSpeaker.vue";
import PickAvatar from "./components/PickAvatar/PickAvatar.vue";
import PickBgi from "./components/PickBgi/PickBgi.vue";
import PickPicture from "./components/PickPicture/PickPicture.vue";
import PickMusic from "./components/PickMusic/PickMusic.vue";
import PickVideo from "./components/PickVideo/PickVideo.vue";
import PickText from "./components/PickText/PickText.vue";
import PickSubtitles from "./components/PickSubtitles/PickSubtitles.vue";
import PickTemplate from "./components/PickTemplate/PickTemplate.vue";

let contentWatchTimer = null;
let touchTime = null;
let dataCache = {};

// rgba对象转字符串
const rgbaObj2Str = ({ r, g, b, a }) => `rgba(${r},${g},${b},${a})`;

let iterator = null; // 获取数据流迭代器
export default {
	name: "CreateVideo",
	components: {
		LuYin,
		PageLoading,
		ConfirmDialog,
		PickAvatar,
		PickSpeaker,
		PickBgi,
		PickPicture,
		PickMusic,
		PickVideo,
		PickText,
		PickSubtitles,
		PickTemplate
	},
	data() {
		return {
			// 模板数据
			imgPath: tools.imgPath,
			companyName: tools.companyName,
			inf0Pt: 0,
			systemInfo: {},
			userInfo: {},
			webStyle: {
				height: ""
			},
			keyboardH: 0,
			keyboardLock: false,
			LoginDialogShow: false,
			pageInfo: {},

			// 视图数据
			contentLen: 500,
			speaker: {},
			homeDetailInfo: {},
			getVirtualcoinrationData: {},
			confirmDialogOpt1: {
				dialogShow: false,
				title: "选择模板",
				cont: "此操作将覆盖全部场景, 是否继续?",
				btns: [
					{
						text: "取消",
						fnName: "cancel",
						args: []
					},
					{
						text: "确定",
						fnName: "confirm",
						args: []
					}
				]
			},
			subtitlesShow: false,
			surplusTime: "00:00",
			getFontSizeVal: "",
			getFontSizeStyle: {
				// fontSize: 50,
				// fontFamily: "剑豪体",
				// color: "#ff00ffff",
				// background: "#ffffffff",
				// strokeWidth: 5 * 2,
				// strokeColor: "#000000ff"
			},
			pageLoadingTips: "",
			pageLoading: false,
			daochuForm: {
				videoName: "未命名项目",
				videoRatio: "1080p"
			},
			ctx: null,
			chicunAc: 2,
			chicunList: [
				{
					id: 1,
					size: "16:9",
					resolution: "1920*1080",
					className: "chicun-16-9"
				},
				{
					id: 2,
					size: "9:16",
					resolution: "1080*1920",
					className: "chicun-9-16"
				},
				{
					id: 3,
					size: "1:1",
					resolution: "1080*1080",
					className: "chicun-1-1"
				}
			],
			showBoxStyle: {},
			changjingRate: 1,
			changjingAc: -1,
			changjing: [],
			changjingListLeft: 0,
			driveTypeList: [
				{
					text: "文案",
					icon: "page3icon1.svg"
				},
				{
					text: "录音",
					icon: "page3icon2.svg"
				}
			],
			btnlist: [
				{
					id: 3,
					text: "配音",
					fnName: "changeFooterBarListAc",
					icon: "Speak.svg",
					args: [{ item: { ac: 7 } }]
				},
				{
					id: 5,
					text: "试听",
					fnName: "shitingCont",
					icon: "volume.svg",
					args: []
				},
				{
					id: 1,
					text: "AI创作",
					fnName: "toAICont",
					icon: "page3icon6.svg",
					args: []
				},
				{
					id: 2,
					text: "热点文案",
					fnName: "toHotspotPage",
					icon: "page3icon5.svg",
					args: []
				}

				// {
				// 	text: "提交",
				// 	fnName: "submit",
				// 	icon: "page3icon5.svg"
				// }
			],
			btnlist2: [
				{
					id: 6,
					text: "随机",
					fnName: "randomCont",
					icon: "page3icon4.svg",
					args: [tools.contList]
				},
				{
					id: 4,
					text: "链接提取",
					fnName: "toBigBreakPage",
					icon: "page3icon5.svg",
					args: []
				}
			],
			audioContext: null,
			audioPlaying: false,
			audioCurrentTime: 0,
			shiTingContCtx: null,
			myDialogPopupShow: false,
			pageShow: true,
			page3LuYinShow: false,
			footerBarShow: true,
			footerBarListAc: 0,
			footerBarList: [
				{
					ac: 8,
					icon: "template",
					type: "template",
					text: "模板",
					show: true,
					pageAc: 0
				},
				{
					ac: 1,
					icon: "avatar",
					type: "avatar",
					text: "数字人",
					show: true,
					pageAc: 0
				},
				{
					ac: 7,
					icon: "speaker",
					type: "speaker",
					show: false,
					text: "配音"
				},
				{
					ac: 2,
					icon: "bgi",
					type: "bgi",
					show: true,
					text: "背景",
					pageAc: 0
				},
				{
					ac: 3,
					icon: "picture",
					type: "photo",
					show: true,
					text: "插图",
					pageAc: 0
				},
				{
					ac: 4,
					icon: "music",
					type: "music",
					show: true,
					text: "音乐",
					pageAc: 0
				},
				{
					ac: 5,
					icon: "video",
					type: "video",
					show: true,
					text: "视频",
					pageAc: 0
				},
				{
					ac: 6,
					icon: "text",
					type: "texts",
					show: true,
					text: "文字",
					pageAc: 0
				},
				{
					ac: 9,
					icon: "subtitles",
					type: "texts2",
					show: true,
					text: "字幕",
					pageAc: 0
				}
			],

			getFrameList: [
				{
					No: 1,
					ctx: null,
					videoCtx: null,
					videoSrc: "https://alleymall.oss-cn-guangzhou.aliyuncs.com/material/1411323036.mp4",
					currentTime: 7
				},
				{
					No: 2,
					ctx: null,
					videoCtx: null,
					videoSrc: "https://alleymall.oss-cn-guangzhou.aliyuncs.com/material/1607671488.mp4",
					currentTime: 7
				},
				{
					No: 3,
					ctx: null,
					videoCtx: null,
					videoSrc: "https://alleymall.oss-cn-guangzhou.aliyuncs.com/material/471561332.mp4",
					currentTime: 7
				},
				{
					No: 4,
					ctx: null,
					videoCtx: null,
					videoSrc: "https://alleymall.oss-cn-guangzhou.aliyuncs.com/material/1608845607.mp4",
					currentTime: 7
				},
				{
					No: 5,
					ctx: null,
					videoCtx: null,
					videoSrc: "https://alleymall.oss-cn-guangzhou.aliyuncs.com/material/1312704778.mp4",
					currentTime: 7
				},
				{
					No: 6,
					ctx: null,
					videoCtx: null,
					videoSrc: "https://alleymall.oss-cn-guangzhou.aliyuncs.com/material/1259801857.mp4",
					currentTime: 7
				}
			]
		};
	},
	methods: {
		// 获取系统info
		initSystemInfo(isUpdate = true) {
			const that = this;
			return new Promise((resolve, reject) => {
				uni.getSystemInfo({
					success(payload) {
						if (isUpdate) {
							that.systemInfo = payload;
							that.webStyle.height = `${that.systemInfo.windowHeight}px`;
							console.log("initSystemInfo", that.systemInfo);
							switch (that.systemInfo.uniPlatform) {
								case "web":
									that.inf0Pt = 4.5;
									break;
								case "app":
									that.inf0Pt = 4.5;
									break;
								case "mp-weixin":
									that.inf0Pt = 4.5;
									break;
							}
						}
						resolve(payload);
					}
				});
			});
		},
		// 跳转页面
		toPage(path, type = "navigateTo") {
			uni[type]({
				url: path
			});
		},
		// 回退
		back() {
			let pages = getCurrentPages();
			if (pages.length > 1) {
				uni.navigateBack({
					delta: 1
				});
			} else {
				uni.setStorageSync("toHome", {
					footerBarListAc: 1
				});
				uni.reLaunch({
					url: "/pages/index/index"
				});
			}
		},
		// 获取页面参数
		async initPageInfo(opt) {
			let Chicun = uni.getStorageSync("chicun");

			if (Chicun) {
				this.chicunAc = Chicun.id;
				uni.removeStorageSync("chicun");
			}
			// // test====================
			// let obj = this.changjing[this.changjingAc].scene2[4];
			// uni.downloadFile({
			// 	url: obj.matterUrl,
			// 	success(res) {
			// 		console.log(res);
			// 		obj.matterUrl = res.tempFilePath;
			// 		uni.getVideoInfo({
			// 			src: res.tempFilePath,
			// 			success(ress) {
			// 				console.log(ress);
			// 			},
			// 			fail(err) {
			// 				console.log(err);
			// 			}
			// 		});
			// 	},
			// 	fail(err) {
			// 		console.log(err);
			// 	}
			// });

			// const time = 100;
			// const duration = 10 * 1000;
			// let tempUrlList = [];
			// const play = (currTime = 0) => {
			// 	return new Promise((next) => {
			// 		if (currTime >= duration) {
			// 			next(true);
			// 			return;
			// 		}
			// 		uni.downloadFile({
			// 			url: obj.matterUrl + `?x-oss-process=video/snapshot,t_${currTime},f_png,w_260,h_462,m_fast`,
			// 			async success(ress) {
			// 				tempUrlList.push(ress.tempFilePath);
			// 				currTime += time;
			// 				let flag = await play(currTime);
			// 				next(flag);
			// 			},
			// 			fail(err) {
			// 				next(false);
			// 				console.log(err);
			// 			}
			// 		});
			// 	});
			// };
			// let flag = await play(0);
			// console.log(flag, tempUrlList);
		},

		// 监听登录弹出层显示
		changeLoginDialogShow(val) {
			this.LoginDialogShow = val;
		},
		// 登陆成功数据刷新
		loginDialogShowSucc() {
			this.getData();
		},
		//判断登录
		async isLogin() {
			if (!this.userInfo.detailInfoRightList) {
				let res = await api.getSelectauditlist();
				return !!res;
			} else {
				return true;
			}
		},
		// 获取用户会员
		async getUserVipStatus() {
			const res3 = await api.getUserVipStatus();
			if (!res3) return;
			let userInfo = JSON.parse(uni.getStorageSync("userInfo") || "{}");
			let resData = res3.data;
			userInfo.vipName = resData[resData.length - 1]?.memberName;
			userInfo.vipTime = resData[resData.length - 1]?.finalTime;
			userInfo.vipId = resData[resData.length - 1]?.memberType;
			userInfo.vipIds = res3.data.map((e) => e.memberType);
			// userInfo.vipIds = [
			//     "1732410233318158337",
			//     "1738862163041185793"
			// ]

			//终端个人详情页
			const res = await api.getHomeDetailInfo();
			if (!res) return;
			userInfo.detailInfo = res.data;
			userInfo.goldNum = res.data.rightList.find((e) => e.rightsName == "金币" || e.id == "1741564651566090455")?.totalRightBalance ?? 0;
			userInfo.detailInfoRightList = res.data.rightList.map((e) => {
				switch (e.id) {
					// "短视频时长"
					case "1":
						e.totalRightBalance = (e.totalRightBalance / 60000).toFixed(2) + "分钟";
						break;
					// "直播合成时长"
					case "1710556060574937089":
						e.totalRightBalance = (e.totalRightBalance / 60000).toFixed(2) + "分钟";
						break;
					// "金币"
					case "1741564651566090455":
						e.totalRightBalance += "个";
						break;
					// ""
					default:
						e.totalRightBalance += "次";
						break;
				}
				return e;
			});
			uni.setStorageSync("userInfo", JSON.stringify(userInfo));
			this.initUserInfo();
		},
		// 终端个人详情页
		getHomeDetailInfoApi() {
			return api.getHomeDetailInfo().then((res) => {
				if (!res) return;
				if (!res.data) res.data = {};
				this.homeDetailInfo = res.data;
				if (this.homeDetailInfo.rightList) {
					let duanshipinIndex = this.homeDetailInfo.rightList.findIndex((e) => e.id == "1");
					let jinbiIndex = this.homeDetailInfo.rightList.findIndex((e) => e.id == "1741564651566090455");
					this.homeDetailInfo.rightList[duanshipinIndex].totalRightBalance = this.homeDetailInfo.rightList[duanshipinIndex].totalRightBalance / 1000;
					console.log("终端个人详情页", duanshipinIndex, this.homeDetailInfo.rightList[duanshipinIndex]);
					this.homeDetailInfo.rightList[duanshipinIndex].totalRightBalanceGold = this.homeDetailInfo.rightList[jinbiIndex].totalRightBalance;
					this.homeDetailInfo.rightList[duanshipinIndex].totalRightBalanceTips = `约${(
						((this.homeDetailInfo.rightList[duanshipinIndex].totalRightBalanceGold / this.getVirtualcoinrationData[duanshipinIndex].proportionSource / this.getVirtualcoinrationData[duanshipinIndex].proportionTarget) * 1000) /
						60
					).toFixed(1)}分钟视频`;
					this.homeDetailInfo.rightList[duanshipinIndex].totalRightBalanceStr = this.seconds2Time(this.homeDetailInfo.rightList[duanshipinIndex].totalRightBalance) || `0分钟`;
					this.surplusTime = this.seconds2Time2(this.homeDetailInfo.rightList[0].totalRightBalance);
					return true;
				}
			});
		},
		//获取所有 权益：金币 比例
		getVirtualcoinrationAllApi() {
			return api.getVirtualcoinrationAll().then((res) => {
				if (!res) return;
				this.getVirtualcoinrationData = res.data;
				return true;
			});
		},

		// 用户信息初始化
		initUserInfo() {
			this.userInfo = JSON.parse(uni.getStorageSync("userInfo") || "{}");
			this.userInfo.detailInfoRightList = (this.userInfo.detailInfoRightList || [])
				.filter((e) => {
					return !["AI绘画", "文案生成"].includes(e.rightsName);
				})
				.map((e) => {
					switch (e.rightsName) {
						case "AI成片":
							e.rightsDescript = "快速成片";
							break;
						case "AI变声":
							e.rightsDescript = "文本转语音";
							break;
						case "数字名片":
							e.rightsDescript = "照片说话";
							break;
					}
					return e;
				});
		},

		// 获取数据
		async getData() {
			await this.initFontList();
			await this.getVirtualcoinrationAllApi();
			await this.getHomeDetailInfoApi();
			return true;
		},
		// 秒转`${m}分钟${s}秒`
		seconds2Time(seconds) {
			let s = Math.floor(seconds % 60);
			let m = Math.floor(seconds / 60);
			return `${m ? m + "分钟" : ""}${+s ? s + "秒" : ""}`;
		},

		// 秒转`${m}:${s}`
		seconds2Time2(seconds) {
			let s = Math.floor(seconds % 60);
			let m = Math.floor(seconds / 60);
			return `${m ? m + ":" : ""}${+s ? s + "" : ""}`;
		},
		// fontList初始化
		initFontList() {
			return api.getFont().then((res) => {
				if (!res.data) return;
				res.data.map((fontobj) => {
					tools.loadFont_wx(fontobj.fontName, fontobj.fontUrl);
				});
			});
		},
		// showBox初始化
		async initShowBox() {
			let workShowRef = await tools.getNode(uni, ".work-show");
			const baseUnit = this.systemInfo.windowWidth / 100;
			let workShowH = workShowRef.height;
			console.log("showBox初始化-workShowRef", workShowRef, workShowH, baseUnit);
			let workShowH_vw = workShowRef.height / baseUnit;
			let showBoxW = 0;
			let chicunRatio = 1; //尺寸比例，用来计算showBoxH

			switch (+this.chicunAc) {
				case 1: //横屏
					showBoxW = 100;
					chicunRatio = 9 / 16;
					break;
				case 2: //竖屏
					showBoxW = workShowH_vw * (9 / 16);
					chicunRatio = 16 / 9;
					break;
				case 3: //1：1屏
					showBoxW = workShowH_vw;
				default:
					break;
			}
			this.showBoxStyle = {
				width: showBoxW,
				height: showBoxW * chicunRatio,
				// background: '#FFF',
				showBoxRef: {}
			};
			let showBoxRef = await tools.getNode(uni, ".show-box");
			this.showBoxStyle.showBoxRef = showBoxRef;

			let changjingItemRef = await tools.getNode(uni, ".changjing-item");
			// console.log({changjingItemRef},changjingItemRef.height,workShowRef.height)
			this.changjingRate = changjingItemRef.height / workShowRef.height;
			return true;
		},
		// 文本初始化
		initCont() {
			let changjingitem = this.changjing[this.changjingAc];
			if (!changjingitem) return;
			let AiCont = uni.getStorageSync("aiCont");
			let content = changjingitem.content;
			if (AiCont) {
				content = AiCont.cont.slice(0, this.contentLen);
				uni.removeStorageSync("aiCont");
			}
			this.contentWatch(content);
			// changjingitem.content = content;
		},
		// 场景初始化
		async initChangjing() {
			let Operate = uni.getStorageSync("draft");
			let Template = uni.getStorageSync("template");
			if (Operate) {
				console.log("有草稿");
				this.changjing = [{}];
				this.changjingAc = 0;
				await new Promise((next) => this.$nextTick(next));
				await this.initShowBox();
				let res = await api.getCacheAdvanceRetreatSelectall({
					key: Operate.draftId
				});
				if (!res) {
					tools.easyToast("此草稿已失效!");
					this.addChangjing();
					return;
				}
				let item = JSON.parse(res.data.value[res.data.value.length - 1].value);
				this.changjing = [];
				this.restoreChangjing(item.operatChangjing);
				uni.removeStorageSync("draft");
			} else if (Template) {
				console.log("有模板");
				this.changjing = [{}];
				this.changjingAc = 0;
				await new Promise((next) => this.$nextTick(next));
				await this.initShowBox();
				let res = await uni.request({
					url: Template.matterUrl
				});
				if (!res) {
					tools.easyToast("此模板已失效!");
					this.addChangjing();
					return;
				}
				this.changjing = [];
				this.restoreChangjing(res.data);
				uni.removeStorageSync("template");
			} else {
				this.addChangjing();
			}
			// this.changjing = [
			// 	{
			// 		scene2Ac: null,
			// 		scene2: [
			// 			{
			// 				eleType: "bgi",
			// 				picSrc: "http://192.168.124.87:8080/assets/material/159887156.jpg",
			// 				x: "0",
			// 				y: "0",
			// 				w: "259.75",
			// 				h: "461.78",
			// 				z: 0,
			// 				pageX: null,
			// 				pageY: null,
			// 				oldX: null,
			// 				oldY: null,
			// 				oldW: null,
			// 				oldH: null
			// 				// isSelect: true
			// 			},
			// 			{
			// 				eleType: "avatar",
			// 				picSrc: "https://mobvoi-digitalhuman-public.weta365.com/46a3aa40e82e4ed4a1912dfeb4c425ff.png",
			// 				x: "0",
			// 				y: "0",
			// 				w: "259.75",
			// 				h: "461.78",
			// 				z: 0,
			// 				pageX: null,
			// 				pageY: null,
			// 				oldX: null,
			// 				oldY: null,
			// 				oldW: null,
			// 				oldH: null
			// 				// isSelect: true
			// 			},
			// 			{
			// 				eleType: "photo",
			// 				picSrc: "https://alleymall.oss-cn-guangzhou.aliyuncs.com/material/289981293.gif",
			// 				x: "0",
			// 				y: "0",
			// 				w: "259.75",
			// 				h: "259.75",
			// 				z: 0,
			// 				pageX: null,
			// 				pageY: null,
			// 				oldX: null,
			// 				oldY: null,
			// 				oldW: null,
			// 				oldH: null
			// 				// isSelect: true
			// 			},
			// 			{
			// 				eleType: "texts",
			// 				cont: "视频标题",
			// 				style: {
			// 					fontSize: 20,
			// 					oldFontSize: 0
			// 				},
			// 				x: "0",
			// 				y: "0",
			// 				w: "80",
			// 				h: "26",
			// 				z: 1,
			// 				pageX: null,
			// 				pageY: null,
			// 				oldX: null,
			// 				oldY: null,
			// 				oldW: null,
			// 				oldH: null
			// 				// isSelect: true
			// 			},
			// 			{
			// 				eleType: "video",
			// 				matterUrl: "https://alleymall.oss-cn-guangzhou.aliyuncs.com/material/1411323036.mp4",
			// 				picSrc: "https://alleymall.oss-cn-guangzhou.aliyuncs.com/material/1411323036.mp4?x-oss-process=video/snapshot,t_7000,f_png,w_260,h_462,m_fast",
			// 				x: "0",
			// 				y: "0",
			// 				w: "259.75",
			// 				h: "461.78",
			// 				z: 0,
			// 				pageX: null,
			// 				pageY: null,
			// 				oldX: null,
			// 				oldY: null,
			// 				oldW: null,
			// 				oldH: null
			// 			}
			// 		]
			// 	}
			// ];
		},
		// 删除场景
		delChangjing(item, index) {
			this.changjing.splice(index, 1);
			this.changeChangjingAc(this.changjing[0], 0);
		},
		// 切换场景ac
		changeChangjingAc(changjingItem, changjingIndex) {
			if (contentWatchTimer) return;
			this.changjingAc = changjingIndex;
			let changjingitem = this.changjing[this.changjingAc];
			if (this.shiTingContCtx) {
				this.shiTingContCtx.stop();
				setTimeout(() => {
					this.shiTingContCtx.src = changjingitem.contentSrc;
				}, 300);
			}
			if (this.audioPlaying) {
				this.audioContext.stop();
			}
			this.audioContext.src = changjingitem.audioSrc;
			this.audioPlaying = false;
			this.audioCurrentTime = 0;
		},
		// 添加场景
		async addChangjing() {
			let content = "";
			let AiCont = uni.getStorageSync("aiCont");
			if (AiCont) {
				content = AiCont.cont;
				uni.removeStorageSync("aiCont");
			}
			if (this.changjingAc == -1) {
				// 初始化场景
				this.changjing.push({
					chicunAc: this.chicunAc,
					scene2: [],
					bgm: {
						volume: 40
					},
					audioSrc: "",
					audioCont: "",
					audioDuration: 0,
					scene2Ac: null,
					content: content,
					contentCache: null,
					contentSrc: null,
					driveTypeInd: 0,
					speed: 1.1,
					pitch: 0,
					volume: 100,
					speaker: {},
					idx: tools.createID()
				});

				let index = this.changjing.length - 1;
				this.changeChangjingAc(this.changjing[index], index);

				if (this.changjing.length == 1) {
					// 初始化showBox
					await this.initShowBox();
				}

				// 初始化数字人
				console.log("初始化数字人-dataCache.avatarData", dataCache.avatarData);
				if (!dataCache.avatarData) {
					dataCache.avatarData = {};
					let AvatarData = await api.getQmsUserHumanModelById({
						size: 2,
						current: 1
					});
					if (!AvatarData?.data?.records) {
						dataCache.avatarData.yushe = null;
					} else {
						dataCache.avatarData.yushe = AvatarData.data.records.map((e) => {
							return {
								...e,
								picSrc: e.speakerUrl,
								name: e.speakerName,
								isVip: e.vipStatus == 1
							};
						});
					}
				}
				console.log("dataCache.avatarData.yushe", dataCache.avatarData.yushe);
				if (dataCache.avatarData.yushe) {
					let AvatarIndex = 0;
					let AvatarItem = dataCache.avatarData.yushe[AvatarIndex];
					let AvatarStorage = uni.getStorageSync("avatar");
					if (AvatarStorage) {
						let AvatarRes = await api.getQmsUserHumanModelOne({ id: AvatarStorage.id });
						if (AvatarRes) {
							AvatarItem = {
								...AvatarRes.data,
								picSrc: AvatarRes.data.speakerUrl,
								name: AvatarRes.data.speakerName,
								isVip: AvatarRes.data.vipStatus == 1
							};
						}
						// AvatarIndex = dataCache.avatarData.yushe.findIndex((e) => e.id == AvatarStorage.id);
						uni.removeStorageSync("avatar");
					}
					this.pickAvatar({
						item: AvatarItem,
						index: AvatarIndex
					});
				}

				// 初始化字幕
				if (content.length != 0) {
					this.contentWatch(content);
				}
			} else {
				// 复制当前场景
				let changjingItem = JSON.parse(JSON.stringify(this.changjing[this.changjingAc]));
				changjingItem.content = "";
				changjingItem.contentCache = null;
				changjingItem.contentSrc = null;
				changjingItem.audioSrc = "";
				changjingItem.audioCont = "";
				changjingItem.audioDuration = 0;
				changjingItem.idx = tools.createID();
				changjingItem.scene2Ac = null;
				changjingItem.scene2 = changjingItem.scene2.filter((e) => e.eleType != "texts2");
				this.changjing.push(changjingItem);
				let index = this.changjing.length - 1;
				this.changeChangjingAc(this.changjing[index], index);
			}
			await new Promise((next) => this.$nextTick(next));
			let changjingListNode = await tools.getNode(uni, ".changjing-list");
			this.changjingListLeft = changjingListNode.width;
		},
		// 还原场景
		async restoreChangjing(changjing) {
			console.log("还原场景", changjing);
			let showBoxRef = await tools.getNode(uni, ".show-box");
			let showBoxH = showBoxRef.height;
			changjing.map((ChangjingData) => {
				let changjingItem = {};
				let scene2 = [];
				let bgm = {};
				// console.log(ChangjingData.clipTrackData.map(e => e.num.map(e=>[e,ChangjingData.scene2[e.scene2Ind]])));
				let ratio = showBoxH / ChangjingData.sceneBoxPrevHeight;
				console.log(showBoxH, ChangjingData.sceneBoxPrevHeight);
				ChangjingData.clipTrackData.map((clipTrack) => {
					clipTrack.num.map((e, i) => {
						let scene2Item = {};
						switch (e.eleType) {
							case "avatar_style":
								scene2Item = ChangjingData.scene2[e.scene2Ind];
								scene2Item.picSrc = scene2Item.speakerUrl;
								scene2Item.x *= ratio;
								scene2Item.y *= ratio;
								scene2Item.w *= ratio;
								scene2Item.h *= ratio;
								scene2.push(scene2Item);
								break;
							case "bgi_style":
								scene2Item = ChangjingData.scene2[e.scene2Ind];
								scene2Item.eleType = "bgi";
								scene2Item.picSrc = scene2Item.matterUrl;
								scene2Item.x *= ratio;
								scene2Item.y *= ratio;
								scene2Item.w *= ratio;
								scene2Item.h *= ratio;
								scene2.push(scene2Item);
								break;
							case "video_style_1":
								scene2Item = ChangjingData.scene2[e.scene2Ind];
								scene2Item.eleType = "video";
								scene2Item.picSrc = scene2Item.theCover || scene2Item.matterUrl + `?x-oss-process=video/snapshot,t_${0},f_png,m_fast`;
								scene2Item.x *= ratio;
								scene2Item.y *= ratio;
								scene2Item.w *= ratio;
								scene2Item.h *= ratio;
								scene2.push(scene2Item);
								break;

							case "video_style_0":
								scene2Item = ChangjingData.scene2[e.scene2Ind];
								scene2Item.eleType = "photo";
								scene2Item.picSrc = scene2Item.matterUrl;
								scene2Item.x *= ratio;
								scene2Item.y *= ratio;
								scene2Item.w *= ratio;
								scene2Item.h *= ratio;
								scene2.push(scene2Item);
								break;
							case "tag_style":
								scene2Item = ChangjingData.scene2[e.scene2Ind];
								scene2Item.isText = true;
								// scene2Item.sand.fontsize *= ratio;
								scene2Item.x *= ratio;
								scene2Item.y *= ratio;
								scene2Item.w *= ratio;
								scene2Item.h *= ratio;
								// tools.loadFont(sand.fontname, sand.fontUrl);
								// scene2Item.sand.fontsize = Math.floor(scene2Item.sand.fontsize);
								scene2Item.sand.fontsize = Math.floor(scene2Item.sand.fontsize * ratio);
								scene2Item.sand.primaryColourVal = tools.hexToRgb(scene2Item.sand.primaryColour);
								scene2Item.sand.bgStyleVal = tools.hexToRgb(scene2Item.sand.bgStyle);
								scene2Item.sand.strokeStyleVal = tools.hexToRgb(scene2Item.sand.strokeStyle);

								scene2.push(scene2Item);
								break;
							case "subtitles_style":
								if (i > 0) break;
								scene2Item = ChangjingData.scene2[e.scene2Ind];
								scene2Item.isText = true;
								// scene2Item.sand.fontsize *= ratio;
								scene2Item.ind = i;
								scene2Item.x *= ratio;
								scene2Item.y *= ratio;
								scene2Item.w *= ratio;
								scene2Item.h *= ratio;
								// tools.loadFont(sand.fontname, sand.fontUrl);
								// scene2Item.sand.fontsize = Math.floor(scene2Item.sand.fontsize);
								scene2Item.sand.fontsize = Math.floor(scene2Item.sand.fontsize * ratio);
								scene2Item.sand.primaryColourVal = tools.hexToRgb(scene2Item.sand.primaryColour);
								scene2Item.sand.bgStyleVal = tools.hexToRgb(scene2Item.sand.bgStyle);
								scene2Item.sand.strokeStyleVal = tools.hexToRgb(scene2Item.sand.strokeStyle);

								scene2.push(scene2Item);
								break;
							case "back_audio_style":
								bgm.matterUrl = e.musicUrl;
								bgm.matterName = e.fileName;
						}
					});
				});
				changjingItem.chicunAc = 2;
				changjingItem.scene2 = scene2.reverse();
				changjingItem.bgm = bgm;
				changjingItem.idx = tools.createID();
				changjingItem.speaker = {
					dubId: ChangjingData.audioManData.AudioManAc,
					AudioManStyleAc: ChangjingData.audioManData.AudioManStyleAc
				};
				api.getStyleOfAudioMan(changjingItem.speaker.dubId).then((res) => {
					if (!res) return;
					let citem = this.changjing.find((e) => e.idx == changjingItem.idx);
					if (!citem) return;
					citem.speaker.thirdpartyId = res.data[citem.speaker.AudioManStyleAc].thirdpartyId;
				});
				changjingItem.content = ChangjingData.content;
				changjingItem.contentSrc = ChangjingData.contentSrc || null;
				changjingItem.contentCache = null;

				changjingItem.driveTypeInd = 0;
				if (this.subtitlesShow || changjingItem.scene2.some((e) => e.eleType == "texts2")) {
					this.subtitlesShow = true;
				}
				this.changjing.push(changjingItem);
			});
			this.changeChangjingAc(this.changjing[0], 0);
		},

		// wx小程序oss上传文件
		wx_getOSSApi_new(ossData, file, name) {
			const that = this;
			let res = ossData;
			function getUUID() {
				let keyStr = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";
				keyStr = "xxxxxxxx-6xxx";
				return keyStr.replace(/[xy]/g, (c) => {
					return (c === "x" ? (Math.random() * 16) | 0 : "r&0x3" | "0x8").toString(16);
				});
			}
			let url_name = "https://alleymall.oss-cn-guangzhou.aliyuncs.com";
			let key = res.data.dir + "/" + getUUID() + name;
			return new Promise((next) => {
				uni.uploadFile({
					url: url_name,
					filePath: file,
					name: "file",
					formData: {
						policy: res.data.policy,
						signature: res.data.signature,
						ossaccessKeyId: res.data.accessid,
						key: key,
						dir: res.data.dir,
						host: res.data.host,
						expire: res.data.expire,
						callback: res.data.callback
					},
					success: (uploadFileRes) => {
						let src = url_name + "/" + key;
						// console.log(src);
						// that.audioPlayerSrc = src;
						// console.log(response);
						next({ ...uploadFileRes, src });
					}
				});
			});
		},

		// 监听Page3LuYin弹出框显示
		changePage3LuYinShow(e) {
			this.page3LuYinShow = e.show;
		},

		// 显示confirmDialogOpt1
		showConfirmDialogOpt1(item, index) {
			this.$refs.myDialogPopup.close();
			this.confirmDialogOpt1.dialogShow = true;
			this.confirmDialogOpt1.btns.map((e) => {
				e.args = [item, index];
			});
		},
		// confirmDialogOpt1取消
		confirmDialogOpt1Cancel(item, index) {
			this.confirmDialogOpt1.dialogShow = false;
			this.confirmDialogOpt1.btns.map((e) => {
				e.args = [];
			});
		},
		// confirmDialogOpt1确定
		confirmDialogOpt1Confirm(item, index) {
			this.confirmDialogOpt1.dialogShow = false;
			this.pickTemplate(item, index);
		},
		// 打开导出弹出层
		openPop() {
			this.keyboardLock = true;
			this.$refs.popup.open();
		},
		// 导出弹框
		dialogInputConfirm(val) {
			this.daochuForm.videoName = val;
			this.submit();
		},
		// 提交
		async submit() {
			const that = this;
			console.log(this.changjing);

			let changjingInd = -1;
			let dontSubmit = this.changjing.some((e, i) => {
				let isHaveAvatar = e.scene2.some((scene2El) => {
					return scene2El.eleType == "avatar";
				});
				if (!isHaveAvatar) {
					tools.easyToast("请选择数字人！");
					changjingInd = i;
					return true;
				}
				let tempStr = e.content.replace(/\s/g, "").replace(/[^a-zA-Z0-9(\u4e00-\u9fa5)]/g, "");
				let isEnoughFont = tempStr.length >= 20;
				if (!e.audioSrc && !isEnoughFont) {
					tools.easyToast("至少输入20个文字！不包括标点符号");
					changjingInd = i;
					return true;
				}
			});
			if (dontSubmit) {
				this.changeChangjingAc(this.changjing[changjingInd], changjingInd);
				return;
			}
			this.shiTingContCtx?.stop();
			this.audioContext?.stop();
			that.pageLoadingTips = "导出中，请稍后...";
			that.pageLoading = true;
			if (this.keyboardH != 0) {
				setTimeout(() => {
					this.submit();
				}, 300);
				return;
			}
			let showBoxRef = await tools.getNode(uni, ".show-box");
			let sceneVal = {
				width: showBoxRef.width,
				height: showBoxRef.height
			};
			// 计算导出视频宽高
			let videoRatio = {};
			switch (that.daochuForm.videoRatio) {
				case "1080p":
					const chicunListItem = that.chicunList.find((e) => that.chicunAc == e.id);
					videoRatio = ((chicunListItem) => {
						// console.log(chicunListItem);
						let [width, height] = chicunListItem.resolution.split("*");
						return {
							width,
							height
						};
					})(chicunListItem);
					break;
				case "720p":
					videoRatio = that.isPortrait
						? {
								width: 720,
								height: 1280
						  }
						: {
								width: 1280,
								height: 720
						  };
					break;
				default:
					break;
			}

			function calcSize(field, size) {
				//计算后端视频合成大小(px)
				return (videoRatio[field] * size) / sceneVal[field];
			}
			// 获取视频名称
			let videoName = that.daochuForm.videoName;

			// 保存当前未保存的场景
			// this.changeChangjing(this.changjingAc, true);

			// 生成视频
			let canSubmit = true;
			let items = [];
			try {
				items = that.changjing.map(async (e, i) => {
					return new Promise(async (resolve, reject) => {
						let tempObj = {};
						let detailList = [];
						let stopTime = 0;
						let captionsArr = null;
						let captionsArrNew = null;
						if (!e.audioSrc) {
							//文本驱动
							const magicSpeakerId = e.speaker?.thirdpartyId || e.speaker?.thirdPartyId;
							let avatarInd = e.scene2.findIndex((e) => e.eleType == "avatar");
							let speaker = magicSpeakerId ? magicSpeakerId : "jupiter_BV406";
							let content = e.content.replace(/\'/g, `'\\''`);
							let ttsRes = null;
							if (!e.contentSrc || e.contentCache != e.content) {
								ttsRes = await api.postAudioTTS({
									speaker: speaker,
									text: content,
									speed: e.speed ?? 1,
									pitch: e.pitch ?? 0,
									volume: e.volume ?? 100
								});
							} else {
								ttsRes = {
									data: e.contentSrc
								};
							}

							if (!ttsRes || !ttsRes.data) {
								that.pageLoading = false;
								tools.easyToast("ttsRes && 合成失败！请重试~");
								return (canSubmit = false);
							}
							// stopTime = await tools.setVideoSrc(ttsRes.data);

							stopTime = await new Promise(async (res) => {
								let time = await api.getDuration({
									lca: ttsRes.data
								});
								console.log("stopTime", time);
								if (!time || !time.data) res(false);
								res(time.data / 1000);
							});
							if (!stopTime) {
								that.pageLoading = false;
								tools.easyToast("stopTime && 合成失败！请重试~");
								return (canSubmit = false);
							}
							captionsArr = await this.createCaptionsArr(e.scene2, content, stopTime, e);

							detailList.push({
								content: content,
								wetaSpeakerId: ttsRes.data,
								contentType: "text",
								magicSpeakerId: speaker,
								speed: e.speed ?? 1,
								pitch: e.pitch ?? 0,
								volume: e.volume ?? 100,
								audioType: 0
							});
						} else {
							//音频驱动
							stopTime = e.audioDuration;
							console.log("音频驱动", e.audioCont);
							if (e.audioCont) {
								captionsArr = await this.createCaptionsArr(e.scene2, e.audioCont, stopTime, e);
							}
							detailList.push({
								content: e.audioSrc,
								contentType: "audio",
								wetaSpeakerId: e.audioSrc
							});
						}
						e.scene2.map((item) => {
							let detailListItem = {};
							detailListItem.contentType = item.eleType;
							detailListItem.startTime = 0;
							detailListItem.stopTime = stopTime * 1000;
							switch (detailListItem.contentType) {
								case "avatar":
									detailListItem.wetaSpeakerId = item.id;
									detailListItem.volume = item.volume ?? 100;
									detailListItem.content = item.speakerId;
									detailListItem.italic = "Y";
									console.log("item.lsLocalhost", item.lsLocalhost);
									if (item.lsLocalhost == 1) {
										detailListItem.driverType = "l_hm";
									}
									if (item.lsLocalhost == 2) {
										detailListItem.driverType = "l_hmd";
									}
									// if (Math.floor(detailListItem.stopTime -
									// 		detailListItem.startTime) == Math.floor(ele
									// 		.matterValue * 1000)) { //不拖动时长
									// 	detailListItem.italic = 'Y';
									// } else { //拖动时长
									// 	detailListItem.italic = 'N';
									// };
									break;
								case "bgi":
								case "photo":
									detailListItem.contentType = "picture";
									detailListItem.content = item.matterUrl;
									break;
								case "video":
									detailListItem.contentType = "backvideo";
									detailListItem.content = item.matterUrl;
									detailListItem.volume = item.volume ?? 10;
									break;
								case "texts":
									detailListItem.contentType = "title";
									detailListItem.text = item.content;
									// detailListItem = { ...detailListItem, ...item.sand };
									// detailListItem.fontType = 'simsun.ttc';//字体类型
									detailListItem.fontType = item.sand.fontname; //字体类型
									detailListItem.backgroundColor = item.sand.bgStyle.slice(0, -2); //字体背景颜色
									detailListItem.fontBackTransparency = (parseInt(item.sand.bgStyle.slice(-2), 16) / 255).toFixed(2); //字体背景透明度
									// detailListItem.fontSize = item.sand.fontsize;//文本类型的字体大小
									detailListItem.fontSize = calcSize("height", item.sand.fontsize); //文本类型的字体大小
									detailListItem.fontColor = item.sand.primaryColour.slice(0, -2); //字体颜色
									detailListItem.fontTransparency = (parseInt(item.sand.primaryColour.slice(-2), 16) / 255).toFixed(2); //字体透明度;
									detailListItem.outlineColor = item.sand.strokeStyle.slice(0, -2); //描边颜色
									detailListItem.outlineTransparency = (parseInt(item.sand.strokeStyle.slice(-2), 16) / 255).toFixed(2); //描边透明度
									detailListItem.outlineSize = item.sand.lineWidth; //描边大小
									break;
								case "texts2":
									if (captionsArr && this.subtitlesShow) {
										console.log("texts2", captionsArr);
										captionsArr.map((captions, captionsind) => {
											let texts2Item = {};
											let x = (sceneVal.width - captions.textWidth) / 2;
											texts2Item.contentType = "subtitletext";
											texts2Item.startTime = +captions.begin_time;
											texts2Item.stopTime = +captions.end_time;
											texts2Item.text = captions.text;
											texts2Item.fontType = item.sand.fontname; //字体类型
											texts2Item.backgroundColor = item.sand.bgStyle.slice(0, -2); //字体背景颜色
											texts2Item.fontBackTransparency = (parseInt(item.sand.bgStyle.slice(-2), 16) / 255).toFixed(2); //字体背景透明度
											texts2Item.fontSize = calcSize("height", item.sand.fontsize); //文本类型的字体大小
											texts2Item.fontColor = item.sand.primaryColour.slice(0, -2); //字体颜色
											texts2Item.fontTransparency = (parseInt(item.sand.primaryColour.slice(-2), 16) / 255).toFixed(2); //字体透明度;
											texts2Item.outlineColor = item.sand.strokeStyle.slice(0, -2); //描边颜色
											texts2Item.outlineTransparency = (parseInt(item.sand.strokeStyle.slice(-2), 16) / 255).toFixed(2); //描边透明度
											texts2Item.outlineSize = item.sand.lineWidth; //描边大小
											texts2Item.width = calcSize("height", captions.textWidth);
											texts2Item.height = calcSize("height", captions.textHeight);
											texts2Item.x = calcSize("height", x);
											texts2Item.y = calcSize("height", item.y);
											[1920, 1080].map((e) => {
												texts2Item.width = texts2Item.width == e ? texts2Item.width + 2 : texts2Item.width;
												texts2Item.height = texts2Item.height == e ? texts2Item.height + 2 : texts2Item.height;
											});
											texts2Item.sortNum = item.z + 1;
											detailList.push(texts2Item);
										});
									}
									break;
								default:
									break;
							}
							if (detailListItem.contentType != "back_audio") {
								detailListItem.x = calcSize("height", item.x);
								detailListItem.y = calcSize("height", item.y);
								detailListItem.width = calcSize("height", item.w);
								detailListItem.height = calcSize("height", item.h);

								detailListItem.x = +detailListItem.x.toFixed(0);
								detailListItem.y = +detailListItem.y.toFixed(0);
								detailListItem.width = +detailListItem.width.toFixed(0);
								detailListItem.height = +detailListItem.height.toFixed(0);

								[1920, 1080].map((e) => {
									detailListItem.width = detailListItem.width == e ? detailListItem.width + 1 : detailListItem.width;
									detailListItem.height = detailListItem.height == e ? detailListItem.height + 1 : detailListItem.height;
								});
								detailListItem.sortNum = item.z + 1;
							}
							if (detailListItem.contentType != "texts2") {
								detailList.push(detailListItem);
							}
						});
						if (e.bgm?.matterUrl) {
							let detailListItem = {};
							detailListItem.startTime = 0;
							detailListItem.stopTime = stopTime * 1000;
							detailListItem.contentType = "back_audio";
							detailListItem.content = e.bgm.matterUrl;
							detailListItem.volume = e.bgm.volume ?? 10;
							detailList.push(detailListItem);
						}
						tempObj.detailList = detailList.map((detail) => {
							return {
								...detail,
								sortNum: /\d/.test(detail.sortNum) ? detail.sortNum : null
							};
						});
						resolve(tempObj);
					});
				});

				let allRes = await Promise.all(items);
				items = allRes;
			} catch (error) {
				//TODO handle the exception
				console.error(error);
				tools.easyToast("导出失败！");
				this.pageLoading = false;
				return;
			}
			let coverUrl = "https://alleymall.oss-cn-guangzhou.aliyuncs.com/2023-12-30/598c4b44-6b09思维认知封面2.png";
			let pic = await this.secne2CanvasPic();
			if (pic) {
				coverUrl = pic;
			}

			let sand = {
				height: videoRatio.height,
				name: videoName,
				width: videoRatio.width,
				coverUrl: coverUrl,
				items: items,
				videoExpedite: 1
			};
			console.log(sand);
			if (!canSubmit) {
				console.log("unSubmit");
				return;
			}
			let res = await myRequest("/thirdparty/video/video/compound/three", sand, "post");
			console.log(res);
			that.pageLoading = false;
			if (!res) return;
			let waitTime = 1500;

			await tools.easyToast("导出成功！", "success");
			uni.setStorageSync("toHome", {
				footerBarListAc: 3
			});
			setTimeout(() => {
				uni.reLaunch({
					url: "/pages/index/index"
				});
			}, waitTime);
			return;
		},
		// 字幕生成
		async createCaptionsArr(scene2, content, stopTime) {
			let captionsArr = null;
			let captionsArrNew = null;
			//更新字幕数据
			let time = stopTime * 1000;

			// let subtitleData = await api.getCaptionsOfUrl3({
			// 	audio_url: ttsRes.data,
			// 	video_type: this.chicunAc == 1 ? "port_en" : "land_pe",
			// 	content: content
			// });
			// console.log("subtitleData", subtitleData);
			// if (!subtitleData || !subtitleData.data) {
			// 	that.pageLoading = false;
			// 	tools.easyToast("合成失败！请重试~");
			// 	return (canSubmit = false);
			// }

			// let promiseList = subtitleData.data.map(async (e) => {
			// 	return {
			// 		...e,
			// 		begin_time: e.start_time,
			// 		end_time: e.end_time,
			// 		text: e.content
			// 	};
			// });
			// captionsArr = await Promise.all(promiseList);
			// console.log("captionsArr", captionsArr);

			/* let subtitleDataIterator = subtitleData.data[Symbol.iterator]();
			
			const captionsFN = async (iteratorItem) => {
				console.log(iteratorItem);
				if (!iteratorItem.value) return;
				captionsFN(subtitleDataIterator.next());
			};
			captionsFN(subtitleDataIterator.next());
			console.log("captionsFN", captionsArr); */

			/* let subtitleData = await api.getCaptionsOfUrl2({
				fileName: parseInt(time),
				// format: 'MP3'
				text: content
			});
			console.log("subtitleData", subtitleData);
			captionsArr = JSON.parse(subtitleData.data)?.flash_result?.sentences;
			if (!captionsArr) {
				that.pageLoading = false;
				tools.easyToast("合成失败！请重试~");
				return (canSubmit = false);
			} */

			const ct = this.contentSplit2(content);
			// 计算字体相对时间占比
			let tempCalcRes = this.calcStrLen(content);
			let tempStrLength = tempCalcRes.arr.length;
			let fontTimeNum = 0;
			fontTimeNum = stopTime / tempStrLength;

			let ctTemp = ct.reduce((p, e, i, s) => {
				let begin_time = p[p.length - 1]?.end_time || 0;
				let el = {
					text: e.text,
					begin_time: begin_time,
					end_time: begin_time + this.calcStrLen(e.text).arr.length * fontTimeNum * 1000,
					channel_id: "0"
				};
				p.push(el);
				return p;
			}, []);
			captionsArr = ctTemp;

			console.log("captionsArr", captionsArr);
			let texts2Val = scene2.find((val) => val.eleType == "texts2");
			if (texts2Val) {
				// 获取字幕宽高
				captionsArrNew = [];
				let captionsArrIterator = captionsArr[Symbol.iterator]();

				const captionsFN = async (iteratorItem) => {
					if (!iteratorItem.value) return false;
					let e = iteratorItem.value;
					return new Promise(async (next) => {
						// console.log(e);
						let textSize = await this.getTextSize(e.text, texts2Val.sand, 1);
						// console.log("获取字幕宽高", e.text, textSize);
						captionsArrNew.push({
							...e,
							...textSize
						});
						await captionsFN(captionsArrIterator.next());
						next(true);
					});
				};
				await captionsFN(captionsArrIterator.next());
				console.log("captionsArrNew", captionsArrNew);

				/* for (let i = 0; i < captionsArr.length; i++) {
					let e = captionsArr[i];
					console.log(e);
					let textSize = await this.getTextSize(e.text, texts2Val.sand, 1);
					console.log("获取字幕宽高", e.text, textSize);
					captionsArrNew.push({
						...e,
						...textSize
					});
				}*/
				captionsArr = captionsArrNew;
				return captionsArr;
			}
		},
		//文本切割
		contentSplit2(content) {
			// str = str.replace(/[^a-zA-Z 0-9(\u4e00-\u9fa5)=@]/g, " ");
			let maxLen_ch = 16;
			let maxLen_mix = 9;
			let maxLen_en = 8;
			let maxLen_enFont = 6;
			return content
				.split("")
				.reduce((p, e, i, s) => {
					if (/[^a-zA-Z 0-9(\u4e00-\u9fa5)=@"'“”‘’\-]/g.test(e)) {
						// 非读音字符
						if (p.length != 0) {
							if (!p[p.length - 2]?.next) {
								if (p[p.length - 2]) {
									let tempArr = this.calcStrLen(p[p.length - 2].text).arr;
									let tempArr2 = this.calcStrLen(p[p.length - 1].text).arr;
									p[p.length - 2].text = tempArr.slice(0, (tempArr.length + tempArr2.length) / 2).reduce((p, e, i, s) => {
										return p + e.text;
									}, "");
									p[p.length - 1].text = tempArr.slice((tempArr.length + tempArr2.length) / 2).reduce((p, e) => p + e.text, "") + p[p.length - 1].text;
								}
							}
							p[p.length - 1].next = true;
							// 添加下一个元素
							if (i != s.length - 1) {
								p.push({ text: "", type: "ch", isEnd: true, next: false });
							}
						}
					} else {
						if (p.length == 0) {
							// 添加第一个元素
							p.push({ text: e, type: "ch", isEnd: true, next: false });
						} else {
							if (/[a-zA-Z]/g.test(e)) {
								p[p.length - 1].text += e;
							} else {
								let tmepArr = this.calcStrLen(p[p.length - 1].text).arr;
								if (tmepArr.length > maxLen_mix) {
									p.push({ text: e, type: "ch", isEnd: true, next: false });
								} else {
									p[p.length - 1].text += e;
								}
							}
						}
					}
					return p;
				}, [])
				.filter((e) => e.text != "");
		},
		// 计算文案长度
		calcStrLen(str) {
			str = str.replace(/[^a-zA-Z 0-9(\u4e00-\u9fa5)=@"'“”‘’\-]/g, " ");
			return str.split("").reduce(
				(p, e, i, s) => {
					if (/["'“”‘’\-]/g.test(e)) return p;
					if (e == " ") {
						if (p.tempStr == "") {
							return p;
						} else {
							p.arr.push({ text: p.tempStr + e, isEnd: 1 });
							p.tempStr = "";
							return p;
						}
					}
					if (/[a-zA-Z]/g.test(e)) {
						if (/[A-Z]/g.test(e)) {
							if (p.tempStr != "") {
								p.arr.push({ text: p.tempStr, isEnd: 0 });
							}
							p.tempStr = e;
						} else if (p.tempStr.length > 6) {
							p.arr.push({ text: p.tempStr, isEnd: 0 });
							p.tempStr = e;
						} else {
							p.tempStr += e;
							if (i == s.length - 1) {
								p.arr.push({ text: p.tempStr, isEnd: 1 });
								p.tempStr = "";
							}
						}
					} else {
						if (p.tempStr != "") {
							p.arr.push({ text: p.tempStr, isEnd: 1 });
							p.tempStr = "";
						}
						p.arr.push({ text: e, isEnd: 1 });
					}
					return p;
				},
				{
					arr: [],
					tempStr: ""
				}
			);
		},
		// 将scene2转成canvas图片
		async secne2CanvasPic() {
			// 初始化
			if (!this.ctx) {
				this.ctx = uni.createCanvasContext("secne2CanvasPic", this);
			}
			let next = await this.ctxRander();
			if (!next) return "";
			let ossRes = await new Promise((next) => {
				uni.canvasToTempFilePath({
					canvasId: "secne2CanvasPic",
					success: async (res) => {
						console.log("生成的封面临时路径:", res.tempFilePath);
						let name = "fengmian.png";
						let tempFilePath = res.tempFilePath;
						let ossData = await api.postOSS({
							reqType: "",
							matName: name,
							payLoad: {}
						});
						let ossRes = await this.wx_getOSSApi_new(ossData, tempFilePath, name);
						next(ossRes);
					},
					fail: (err) => {
						next(false);
						console.error("生成的封面路径:", err);
					}
				});
			});
			console.log("生成的封面路径:", ossRes.src);
			return ossRes.src;
		},
		// 渲染canvas
		async ctxRander(timestamp) {
			console.log("渲染canvas", this.ctx);
			// console.log(Math.floor(timestamp / 1000)); //测试fps
			// 初始化
			if (!this.ctx) {
				this.ctx = uni.createCanvasContext("secne2CanvasPic", this);
			}
			let scene2 = this.changjing[this.changjingAc].scene2;
			iterator = scene2[Symbol.iterator](); // 获取迭代器
			const renderFn = async (iteratorItem, currInd) => {
				if (!iteratorItem.value?.eleType) {
					return true;
				}
				console.log(iteratorItem);
				let item = iteratorItem.value;
				if (item.isText) {
					return renderFn(iterator.next());
					//渲染字体
					if (item.eleType == "texts2") {
						if (item.ind) {
							// 只渲染第一句字幕
							return renderFn(iterator.next());
						}
						if (!this.subtitlesShow) {
							// 不显示字幕
							return renderFn(iterator.next());
						}
					}
					// 渲染背景
					// this.ctx.setFillStyle(item.sand.bgStyle.slice(0,7));
					this.ctx.setFillStyle(rgbaObj2Str(item.sand.bgStyleVal));
					// this.ctx.rect(item.x, item.y /* - item.h */ , item.w, item.h);
					// this.ctx.fill();
					this.ctx.fillRect(item.x, item.y /* - item.h */, item.w, item.h);

					// 渲染文字
					this.ctx.setFillStyle(rgbaObj2Str(item.sand.primaryColourVal));
					this.ctx.font = `${item.sand.fontsize}px ${item.sand.fontFamily}`;
					// console.log(`normal ${item.sand.fontsize}px ${item.sand.fontFamily}`);
					this.ctx.fillText(item.content, item.x, item.y + item.h - 12, item.sw ?? null);

					// 渲染文字描边
					this.ctx.setStrokeStyle(rgbaObj2Str(item.sand.strokeStyleVal));
					this.ctx.setLineWidth(item.sand.lineWidth);
					this.ctx.strokeText(item.content, item.x, item.y + item.h - 12, item.sw ?? null);
				} else {
					if (item.picSrc) {
						let picSrc = await new Promise((next) => {
							uni.downloadFile({
								url: item.picSrc,
								success(res) {
									console.log(res);
									next(res.tempFilePath);
								},
								fail(err) {
									console.log(err);
									next(false);
								}
							});
						});
						console.log("picSrc", picSrc);
						if (picSrc) {
							this.ctx.drawImage(picSrc, item.x, item.y, item.w, item.h);
						}
					}
				}
				// await new Promise((wait) => setTimeout(wait), 300);
				return renderFn(iterator.next());
			};
			let result = await renderFn(iterator.next());
			let go = await new Promise((go) => {
				setTimeout(() => {
					this.ctx.draw(true, () => {
						go("go");
					});
				}, 300);
			});
			console.log("go", go);
			return true;
			for (let index = 0; index < scene2.length; index++) {
				let item = scene2[index];
				if (item.isText) {
					break;
					//渲染字体
					if (item.eleType == "texts2") {
						if (item.ind) {
							// 只渲染第一句字幕
							break;
						}
						if (!this.subtitlesShow) {
							// 不显示字幕
							break;
						}
					}
					// 渲染背景
					// this.ctx.setFillStyle(item.sand.bgStyle.slice(0,7));
					this.ctx.setFillStyle(rgbaObj2Str(item.sand.bgStyleVal));
					// this.ctx.rect(item.x, item.y /* - item.h */ , item.w, item.h);
					// this.ctx.fill();
					this.ctx.fillRect(item.x, item.y /* - item.h */, item.w, item.h);

					// 渲染文字
					this.ctx.setFillStyle(rgbaObj2Str(item.sand.primaryColourVal));
					this.ctx.font = `${item.sand.fontsize}px ${item.sand.fontFamily}`;
					// console.log(`normal ${item.sand.fontsize}px ${item.sand.fontFamily}`);
					this.ctx.fillText(item.content, item.x, item.y + item.h - 12, item.sw ?? null);

					// 渲染文字描边
					this.ctx.setStrokeStyle(rgbaObj2Str(item.sand.strokeStyleVal));
					this.ctx.setLineWidth(item.sand.lineWidth);
					this.ctx.strokeText(item.content, item.x, item.y + item.h - 12, item.sw ?? null);
				} else {
					if (item.picSrc) {
						let picSrc = await new Promise((next) => {
							uni.downloadFile({
								url: item.picSrc,
								success(res) {
									console.log(res);
									next(res.tempFilePath);
								},
								fail(err) {
									console.log(err);
									next(false);
								}
							});
						});
						if (picSrc) {
							this.ctx.drawImage(picSrc, item.x, item.y, item.w, item.h);
						}
					}
				}
			}
			this.ctx.draw();
			return true;
		},

		// 触碰事件
		down_wx(event, item, index) {
			// #ifdef MP-WEIXIN
			this.down(event, item, index);
			// #endif
		},
		// 滑动事件
		move_wx(event, item, index) {
			// #ifdef MP-WEIXIN
			this.move(event, item, index);
			// #endif
		},
		// 滑动结束事件
		up_wx(event, item, index) {
			// #ifdef MP-WEIXIN
			this.up(event, item, index);
			// #endif
		},
		// 触碰事件
		down_web(event, item, index) {
			// #ifndef MP-WEIXIN
			this.down(event, item, index);
			// #endif
		},
		// 滑动事件
		move_web(event, item, index) {
			// #ifndef MP-WEIXIN
			this.move(event, item, index);
			// #endif
		},
		// 滑动结束事件
		up_web(event, item, index) {
			// #ifndef MP-WEIXIN
			this.up(event, item, index);
			// #endif
		},
		// 触碰事件
		down(event, item, index) {
			touchTime = Date.now();
			// console.log("down", event, item, index);
			item = this.changjing[this.changjingAc].scene2[index];
			item.oldX = parseFloat(item.x);
			item.oldY = parseFloat(item.y);
			item.oldW = parseFloat(item.w);
			item.oldH = parseFloat(item.h);
			item.pageX = event.changedTouches[0].pageX;
			item.pageY = event.changedTouches[0].pageY;
			this.changjing[this.changjingAc].scene2Ac = index;
			if (["texts", "texts2"].includes(item.eleType)) {
				item.sand.fontsizeOld = item.sand.fontsize;
				item.sand.lineWidthOld = item.sand.lineWidth;
			}
		},
		// 滑动事件
		move(event, item, index) {
			if (item.eleType == "bgi") return;
			item = this.changjing[this.changjingAc].scene2[this.changjing[this.changjingAc].scene2Ac];
			let calcX = event.changedTouches[0].pageX - item.pageX;
			let calcY = event.changedTouches[0].pageY - item.pageY;

			if (event.target.dataset.classn) {
				//计算元素的宽高比
				const aspectRatio = item.oldW / item.oldH;

				// 元素缩放
				switch (event.target.dataset.classn) {
					case "d1": // (左上)(需改x,y坐标)(先改x坐标，然后通过新旧h差值算出y坐标)
						break;
					case "d2": // (右上)(需改y坐标)
						item.h = item.oldH - calcY;
						item.w = parseFloat(item.h) * aspectRatio;
						item.y = item.oldY + calcY;
						break;
					case "d3": // (左下)(需改x坐标)
						item.w = item.oldW - calcX;
						item.h = parseFloat(item.w) * (1 / aspectRatio);
						item.x = item.oldX + calcX;
						break;
					case "d4": // (右下)(不用改x,y坐标)
						item.w = item.oldW + calcX;
						item.h = parseFloat(item.w) * (1 / aspectRatio);
						break;
					default:
						break;
				}
				if (["texts", "texts2"].includes(item.eleType)) {
					// 文字大小变化(直接使用宽度变化比率计算)
					let fontRate = item.oldW / item.w;
					item.sand.fontsize = item.sand.fontsizeOld * (1 / fontRate);
					item.sand.lineWidth = item.sand.lineWidthOld * (1 / fontRate);
					item.sand.alignAc = null;
				}
			} else {
				// 元素位移
				item.x = item.oldX + calcX;
				item.y = item.oldY + calcY;
				if (["texts", "texts2"].includes(item.eleType)) {
					item.sand.alignAc = null;
				}
			}
		},
		// 滑动结束事件
		up(event, item, index) {
			let offsetTime = Date.now() - touchTime;
			if (offsetTime < 168) {
				let changjingItem = this.changjing[this.changjingAc];
				let scene2Item = changjingItem.scene2[changjingItem.scene2Ac];
				let eleType = scene2Item?.eleType;
				// scene2Item.x = +scene2Item.x.toFixed(0);
				// scene2Item.y = +scene2Item.y.toFixed(0);
				// scene2Item.w = +scene2Item.w.toFixed(0);
				// scene2Item.h = +scene2Item.h.toFixed(0);

				console.log(scene2Item);
				let footerBarListInd = this.footerBarList.findIndex((e) => e.type == eleType);
				let footerBarItem = this.footerBarList[footerBarListInd];
				footerBarItem.pageAc = 1;
				this.changeFooterBarListAc({
					item: this.footerBarList[footerBarListInd],
					index: footerBarListInd
				});
			}
			// console.log("up", event);
		},
		// 点击workBox
		workBoxTap() {
			let changjingItem = this.changjing[this.changjingAc];
			// let scene2Item = changjingItem.scene2[changjingItem.scene2Ac];
			this.$set(changjingItem, "scene2Ac", null);
		},

		// 切换底部栏ac
		changeFooterBarListAc({ item, index }) {
			let changjingitem = this.changjing[this.changjingAc];
			this.footerBarListAc = item.ac;
			this.$refs.myDialogPopup.open();
			if (item.type == "texts2") {
				changjingitem.scene2Ac = changjingitem.scene2.findIndex((e) => e.eleType == "texts2");
			}
		},

		// 切换数字人驱动类型
		changeDriveTypeListInd(index) {
			let changjingitem = this.changjing[this.changjingAc];
			this.$set(changjingitem, "driveTypeInd", index);
		},
		// btnlistTap事件
		btnlistTap(fnName, args = []) {
			if (fnName && this[fnName] && typeof this[fnName] === "function") {
				this[fnName](...args);
			}
		},
		// 改变多选框选项
		checkboxChange(e) {
			console.log(e);
		},
		// 切换字幕显示
		changeSubtitlesShow(e) {
			this.subtitlesShow = !!e.detail.value.length;
		},
		// 文案失焦
		async contentBlur() {
			this.keyboardH = 0;
			console.log("文案失焦");
			let changjingitem = this.changjing[this.changjingAc];
			let scene2CurrInd = changjingitem.scene2.findIndex((e) => e.eleType == "texts2");
			if (scene2CurrInd != -1) {
				if (changjingitem.content == "") {
					changjingitem.scene2.splice(scene2CurrInd, 1);
				} else {
					let obj = changjingitem.scene2[scene2CurrInd];
					let res = await this.getTextSize(changjingitem.content.slice(0, 12), obj.sand, 1);
					obj.content = changjingitem.content.slice(0, 12);
					obj.w = res.textWidth;
					obj.h = res.textHeight;
					let sW = obj.sW;
					let sH = obj.sH;
					switch (obj.sand.alignAc) {
						case 0:
							obj.x = 0;
							break;
						case 1:
							obj.x = (sW - obj.w) / 2;
							break;
						case 2:
							obj.x = sW - obj.w;
							break;
					}
				}
			}
		},
		// 文案点击
		textareaTap() {
			this.keyboardH = 1;
			console.log("文案点击");
		},
		// 文案改变
		contentWatch_web(e) {
			// #ifndef MP-WEIXIN
			this.contentWatch(e);
			// #endif
		},
		// 文案改变
		contentWatch_wx(e) {
			// #ifdef MP-WEIXIN
			this.contentWatch(e);
			// #endif
		},
		// 文案改变
		contentWatch(e) {
			if (contentWatchTimer) {
				clearTimeout(contentWatchTimer);
			}

			contentWatchTimer = setTimeout(async () => {
				let changjingitem = this.changjing[this.changjingAc];
				let scene2CurrInd = changjingitem.scene2.findIndex((e) => e.eleType == "texts2");
				let value = e;
				if (e.detail) {
					value = e.detail.value;
				}
				changjingitem.content = value;
				console.log("文案改变", changjingitem.content);
				if (scene2CurrInd == -1) {
					await this.contentFocus();
					scene2CurrInd = changjingitem.scene2.findIndex((e) => e.eleType == "texts2");
				}
				if (scene2CurrInd != -1) {
					if (changjingitem.content == "") {
						changjingitem.scene2.splice(scene2CurrInd, 1);
					} else {
						let obj = changjingitem.scene2[scene2CurrInd];
						let res = await this.getTextSize(changjingitem.content.slice(0, 12), obj.sand, 1);
						obj.content = changjingitem.content.slice(0, 12);
						obj.w = res.textWidth;
						obj.h = res.textHeight;
						let sW = obj.sW;
						let sH = obj.sH;
						switch (obj.sand.alignAc) {
							case 0:
								obj.x = 0;
								break;
							case 1:
								obj.x = (sW - obj.w) / 2;
								break;
							case 2:
								obj.x = sW - obj.w;
								break;
						}
					}
				}
				contentWatchTimer = null;
			}, 688);
		},
		// 文案聚焦
		async contentFocus() {
			console.log("文案聚焦");
			let changjingitem = this.changjing[this.changjingAc];
			let scene2CurrInd = changjingitem.scene2.findIndex((e) => e.eleType == "texts2");
			if (changjingitem.scene2[scene2CurrInd]?.eleType != "texts2") {
				let content = changjingitem.content; /* || "默认字幕" */
				let obj = await this.renderSubTitleObj(content);
				changjingitem.scene2.push(obj);
				changjingitem.scene2Ac = changjingitem.scene2.length - 1;
				this.updateElZIndex();
			} else {
				changjingitem.scene2Ac = scene2CurrInd;
			}
		},
		// 字幕渲染对象
		async renderSubTitleObj(content, endInd) {
			if (endInd) {
				content = content.slice(0, endInd);
			}
			let showBoxinfo = await tools.getNode(uni, ".show-box");
			let sW = showBoxinfo.width;
			let sH = showBoxinfo.height;
			const fn = (hex) => tools.hexToRgb(hex);
			let obj = {
				eleType: "texts2",
				content: content,
				isText: true,
				lockSize: true,
				sW,
				sH,
				sand: {
					letterSpacing: "0",
					fontname: "alishuheiti.ttf",
					fontFamily: "速黑体",
					primaryColour: "#FFFF99ff",
					primaryColourVal: fn("#FFFF99ff"),
					fontsize: showBoxinfo.width * (1 / 15),
					fontsizeOld: 50,
					lineWidth: 1,
					lineWidthOld: 2,
					strokeStyle: "#000000ff",
					strokeStyleVal: fn("#000000ff"),
					bgStyle: "#ffffff00",
					bgStyleVal: fn("#ffffff00"),
					alignAc: 1
				},
				z: null,
				pageX: null,
				pageY: null,
				oldX: null,
				oldY: null,
				oldW: null,
				oldH: null
			};
			let res = await this.getTextSize(content, obj.sand, 1);
			obj.w = res.textWidth;
			obj.h = res.textHeight;
			obj.x = (sW - obj.w) / 2;
			obj.y = (sH - obj.h) / 1.46;
			return obj;
		},
		// 文案shiTingCtx初始化
		initShiTingContCtx() {
			if (!this.shiTingContCtx) {
				let index = this.btnlist.findIndex((e) => e.id == 5);
				this.shiTingContCtx = uni.createInnerAudioContext();
				// this.shiTingContCtx.obeyMuteSwitch = false;
				// this.shiTingContCtx.loop = true;
				this.shiTingContCtx.onPlay((res) => {
					console.log("this.shiTingContCtx.onPlay", res);
					this.btnlist[index].text = "停止";
				});
				this.shiTingContCtx.onPause((res) => {
					console.log("this.shiTingContCtx.onPause", res);
					this.btnlist[index].text = "试听";
				});
				this.shiTingContCtx.onEnded((res) => {
					console.log("this.shiTingContCtx.onEnded", res);
					this.btnlist[index].text = "试听";
					this.shiTingContCtx.seek(0);
				});
				this.shiTingContCtx.onStop((res) => {
					console.log("this.shiTingContCtx.onStop", res);
					this.btnlist[index].text = "试听";
					this.shiTingContCtx.seek(0);
				});
				this.shiTingContCtx.onSeeking((res) => {
					console.log("this.shiTingContCtx.onSeeking", this.shiTingContCtx.currentTime);
				});
				this.shiTingContCtx.onTimeUpdate((res) => {
					console.log("this.shiTingContCtx.onTimeUpdate", this.shiTingContCtx.currentTime);
				});
			}
		},
		// 文案试听
		async shitingCont() {
			if (!this.shiTingContCtx) this.initShiTingContCtx();
			let index = this.btnlist.findIndex((e) => e.id == 5);

			if (this.btnlist[index].text == "请稍后") return;
			if (this.btnlist[index].text == "试听") {
				this.btnlist[index].text = "请稍后";
				let changjingItem = this.changjing[this.changjingAc];
				let magicSpeakerId = changjingItem.speaker?.thirdpartyId || changjingItem.speaker?.thirdPartyId;
				let speaker = magicSpeakerId ? magicSpeakerId : "jupiter_BV406";
				let content = changjingItem.content.replace(/\'/g, `'\\''`);
				let ttsRes = null;
				if (changjingItem.contentCache != changjingItem.content) {
					uni.showLoading({
						title: "请稍后..."
					});
					ttsRes = await api.postAudioTTS({
						speaker: speaker,
						text: content || "随着技术不断发展，" + this.companyName + "数字人在电商、直播、娱乐、教育、广告等领域的应用越来越广泛",
						text: content ? content : "你能看出我是AI吗？现在你看到的我其实并不是真实的我，而是我的数字分身",
						speed: changjingItem.speed ?? 1,
						pitch: changjingItem.pitch ?? 0,
						volume: changjingItem.volume ?? 100
					});
					uni.hideLoading();
					console.log("文案试听", ttsRes);
					if (!ttsRes || !ttsRes.data || !ttsRes.data.includes("http")) {
						tools.easyToast("音频合成失败！请检查文案~");
						this.btnlist[index].text = "试听";
						changjingItem.contentCache = null;
						return;
					}
					this.shiTingContCtx.src = ttsRes.data;
					changjingItem.contentCache = changjingItem.content;
					changjingItem.contentSrc = ttsRes.data;
					console.log("文案试听", this.shiTingContCtx, this.shiTingContCtx.volume);
				}
				this.$set(this.shiTingContCtx, "volume", changjingItem.volume * 0.01);
				this.shiTingContCtx.play();
				// this.btnlist[index].text = "停止";
			} else {
				this.shiTingContCtx.stop();
				this.btnlist[index].text = "试听";
			}
		},
		// 跳转联系我们页面
		toContactUs(type) {
			uni.setStorageSync("ContactUs", { type });
			this.toPage("/pages/ContactUs/ContactUs");
		},
		// 前往购买页面
		toBuyPage() {
			if (this.companyName != "言影") return;
			let systemInfo = this.systemInfo;
			if (systemInfo.platform === "ios" || (systemInfo.system && systemInfo.system.includes("OS"))) {
				this.toContactUs("购买vip");
			} else {
				this.toPage("/pages/buy/buy");
			}
		},
		// 跳转模特制作页
		async toMakeAvatar() {
			let loginFlag = await this.isLogin();
			if (!loginFlag) return;
			if (
				!this.userInfo.detailInfoRightList.reduce((p, e) => {
					if (["1728692276125716481", "1728692348020281345"].includes(e.id)) {
						p = p + parseFloat(e.totalRightBalance);
					}
					return p;
				}, 0)
			) {
				this.$refs.buyPopup.open();
				return;
			}
			this.toPage("/pages/MakeAvatar/MakeAvatar");
		},
		// 跳转AI文案
		async toAICont() {
			let loginFlag = await this.isLogin();
			if (!loginFlag) return;
			let userInfo = uni.getStorageSync("userInfo");
			if (userInfo) {
				userInfo = JSON.parse(userInfo);
				if (!userInfo.vipName) {
					if (this.companyName == "言影") {
						this.$refs.buyPopup2.open();
					} else {
						tools.easyToast("开通会员畅享AI爆款文案无限制作");
					}
					return;
				}
			}
			this.shiTingContCtx?.stop();
			// uni.setStorageSync("AIContInfo", {
			// 	toPage: "index/2"
			// });
			uni.setStorageSync("AIContMenuInfo", {
				leftDataInd: 3,
				rightDataInd: 0
			});
			this.toPage("/pages/AIContMenu/AIContMenu");
		},
		// 跳转热点文案
		toHotspotPage() {
			this.shiTingContCtx?.stop();
			uni.setStorageSync("createContInfo", {});
			this.toPage("/pages/hotspot/hotspot");
		},
		// 跳转爆款视频翻拍
		toBigBreakPage() {
			this.shiTingContCtx?.stop();
			this.toPage("/pages/bigBreak/bigBreak");
		},

		// 随机文案
		randomCont(contList) {
			let changjingItem = this.changjing[this.changjingAc];
			let ind = tools.randomNum(0, tools.contList.length - 1);
			// changjingItem.content = contList[ind].text;
			this.contentWatch(contList[ind].text);
		},

		// 监听myDialogPopup显示
		changeMyDialogPopupShow(val) {
			if (this.shiTingContCtx) {
				this.shiTingContCtx.stop();
			}
			this.myDialogPopupShow = val.show;
		},

		// 修改语速
		changeContentSpeed(val) {
			let changjingitem = this.changjing[this.changjingAc];
			this.$set(changjingitem, "speed", val);
			this.$set(changjingitem, "contentCache", null);
		},
		// 修改语调
		changeContentPitch(val) {
			let changjingitem = this.changjing[this.changjingAc];
			this.$set(changjingitem, "pitch", val);
			this.$set(changjingitem, "contentCache", null);
		},
		// 修改音量
		changeContentVolume(val) {
			let changjingitem = this.changjing[this.changjingAc];
			this.$set(changjingitem, "volume", val);
		},
		// 选择发音人
		pickContentSpeaker({ item, index }) {
			let changjingitem = this.changjing[this.changjingAc];
			if (!changjingitem) return;
			this.$set(changjingitem, "speaker", item);
			this.$set(changjingitem, "contentCache", null);
			this.speaker = item;
		},
		// 删除发音人
		removeContentSpeaker() {
			let changjingitem = this.changjing[this.changjingAc];
			this.$set(changjingitem, "speaker", {});
			this.$set(changjingitem, "contentCache", null);
			this.speaker = {};
		},

		// 选择模板
		pickTemplate(item, index) {
			console.log("选择模板", item, index);
			uni
				.request({
					url: item.matterUrl
				})
				.then((res) => {
					if (!res) return;
					this.changjing = [];
					this.restoreChangjing(res.data);
				});
		},
		// 选择数字人
		async pickAvatar({ item, index }) {
			if (item.isVip) {
				let userInfo = uni.getStorageSync("userInfo");
				if (userInfo) {
					userInfo = JSON.parse(userInfo);
					if (!userInfo.vipName) return tools.easyToast("请先购买会员！");
				}
			}

			let changjingitem = this.changjing[this.changjingAc];
			let scene2 = changjingitem.scene2;
			let imgDom = {};
			let showBoxinfo = await tools.getNode(uni, ".show-box");
			let sW = showBoxinfo.width;
			let sH = showBoxinfo.height;
			let avatarInd = scene2.findIndex((e) => e.eleType == "avatar");

			if (item.humanBindAudioVo) {
				let speakerItem = {
					...item.humanBindAudioVo,
					...item.humanBindAudioVo.dubVo,
					picSrc: item.humanBindAudioVo.headerImg,
					duration: 0,
					durationStr: "00:00"
				};
				this.pickContentSpeaker({ item: speakerItem });
			}
			// 获取元素的最长边
			let imgW = item.speakerWidth;
			let imgH = item.speakerHeight;
			let whR = imgW / imgH; //宽高比
			// 竖屏
			if (imgW == imgH) {
				//等宽高
				imgDom = {
					naturalWidth: sW,
					naturalHeight: sW
				};
			} else if (imgH > imgW) {
				//高长
				imgDom.naturalHeight = sH;
				imgDom.naturalWidth = sH * whR;
			} else {
				//宽长
				imgDom.naturalWidth = sW;
				imgDom.naturalHeight = sW / whR;
			}
			let temp = {
				...item,
				eleType: "avatar",
				x: (sW - imgDom.naturalWidth) / 2,
				y: (sH - imgDom.naturalHeight) / 2,
				w: imgDom.naturalWidth,
				h: imgDom.naturalHeight,
				pageX: null,
				pageY: null,
				oldX: null,
				oldY: null,
				oldW: null,
				oldH: null,
				z: null
			};
			if (avatarInd != -1) {
				let oldAvatar = scene2[avatarInd];
				this.$set(scene2, avatarInd, {
					...oldAvatar,
					...temp,
					x: oldAvatar.x,
					y: oldAvatar.y
				});
			} else {
				scene2.push(temp);
			}
			this.$set(changjingitem, "scene2", scene2);
			this.updateElZIndex();
		},
		// 删除数字人
		removeAvatar(ind) {},
		// 选择背景
		async pickBgi({ item, index }) {
			let changjingitem = this.changjing[this.changjingAc];
			let scene2 = changjingitem.scene2;

			// 获取showBox大小
			let showBoxinfo = await tools.getNode(uni, ".show-box");
			let sW = showBoxinfo.width;
			let sH = showBoxinfo.height;

			let bgiInd = scene2.findIndex((e) => e.eleType == "bgi"); //找出背景图;

			// 获取图片信息
			let imgDom = null;
			let imageInfo = await new Promise((resolve) => {
				uni.getImageInfo({
					src: item.picSrc,
					success(res) {
						resolve(res);
					},
					fail(err) {
						console.log("获取showBox大小", err);
						resolve(false);
					}
				});
			});
			if (!imageInfo) {
				tools.easyToast("解析图片出错！");
				return;
			}
			let imgW = imageInfo.width;
			let imgH = imageInfo.height;
			let [maxLenStr, minLenStr] = imgW < imgH ? ["Height", "Width"] : ["Width", "Height"];
			let w, h;
			if (maxLenStr == "Height") {
				w = showBoxinfo.width;
				h = (imgH * w) / imgW;
				if (h < showBoxinfo.height) {
					h = showBoxinfo.height;
					w = (imgW * h) / imgH;
				}
			} else {
				h = showBoxinfo.height;
				w = (imgW * h) / imgH;
				if (w < showBoxinfo.width) {
					w = showBoxinfo.width;
					h = (imgH * w) / imgW;
				}
			}
			if (item.tabbarColor) {
				//背景颜色直接16：9展示
				h = showBoxinfo.height;
				w = (h * 16) / 9;
			}
			let whR = imgW / imgH; //宽高比
			//竖屏(同高切宽)
			imgDom = {
				naturalWidth: sH * whR,
				naturalHeight: sH
			};

			let temp = {
				...item,
				eleType: "bgi",
				x: (showBoxinfo.width - w) / 2, //水平居中
				y: (showBoxinfo.height - h) / 2, //垂直居中
				w: w,
				h: h,
				z: null,
				pageX: null,
				pageY: null,
				oldX: null,
				oldY: null,
				oldW: null,
				oldH: null
			};
			if (bgiInd != -1) {
				let oldBgi = scene2[bgiInd];
				this.$set(scene2, bgiInd, {
					...oldBgi,
					...temp,
					x: oldBgi.x,
					y: oldBgi.y
				});
			} else {
				scene2.unshift(temp);
			}
			this.$set(changjingitem, "scene2", scene2);
			this.updateElZIndex();
		},
		// 选择插图
		async pickPicture({ item, index }) {
			let changjingitem = this.changjing[this.changjingAc];
			let scene2 = changjingitem.scene2;

			// 获取showBox大小
			let showBoxinfo = await tools.getNode(uni, ".show-box");
			let sW = showBoxinfo.width;
			let sH = showBoxinfo.height;

			// 获取图片信息
			let imgDom = {};
			let imageInfo = await new Promise((resolve) => {
				uni.getImageInfo({
					src: item.picSrc,
					success(res) {
						resolve(res);
					},
					fail(err) {
						console.log(err);
						resolve(false);
					}
				});
			});
			if (!imageInfo) {
				tools.easyToast("解析图片出错！");
				return;
			}
			let imgW = imageInfo.width;
			let imgH = imageInfo.height;
			let whR = imgW / imgH; //宽高比
			// 竖屏
			if (imgW == imgH) {
				//等宽高
				imgDom = {
					naturalWidth: sW,
					naturalHeight: sW
				};
			} else if (imgH > imgW) {
				//高长
				imgDom.naturalHeight = sH;
				imgDom.naturalWidth = sH * whR;
			} else {
				//宽长
				imgDom.naturalWidth = sW;
				imgDom.naturalHeight = sW / whR;
			}
			let temp = {
				...item,
				eleType: "photo",
				x: (sW - imgDom.naturalWidth) / 2,
				y: (sH - imgDom.naturalHeight) / 2,
				w: imgDom.naturalWidth,
				h: imgDom.naturalHeight,
				z: null,
				pageX: null,
				pageY: null,
				oldX: null,
				oldY: null,
				oldW: null,
				oldH: null
			};
			scene2.push(temp);
			this.$set(changjingitem, "scene2", scene2);
			this.updateElZIndex();
		},

		// 选择音乐
		async pickMusic({ item, index }) {
			let changjingitem = this.changjing[this.changjingAc];
			changjingitem.bgm = item;
		},
		// 删除音乐
		removeMusic() {
			let changjingitem = this.changjing[this.changjingAc];
			this.$set(changjingitem, "bgm", {
				volume: changjingitem.bgm.volume
			});
		},
		// 选择视频
		async pickVideo({ item, index }) {
			let changjingitem = this.changjing[this.changjingAc];
			let scene2 = changjingitem.scene2;

			// 获取showBox大小
			let showBoxinfo = await tools.getNode(uni, ".show-box");
			let sW = showBoxinfo.width;
			let sH = showBoxinfo.height;
			// 获取图片信息
			let imgDom = {};
			let imageInfo = await new Promise((resolve) => {
				uni.getImageInfo({
					src: item.picSrc,
					success(res) {
						resolve(res);
					},
					fail(err) {
						console.log(err);
						resolve(false);
					}
				});
			});
			if (!imageInfo) {
				tools.easyToast("解析图片出错！");
				return;
			}
			let imgW = imageInfo.width;
			let imgH = imageInfo.height;
			let whR = imgW / imgH; //宽高比
			// 竖屏
			if (imgW == imgH) {
				//等宽高
				imgDom = {
					naturalWidth: sW,
					naturalHeight: sW
				};
			} else if (imgH > imgW) {
				//高长
				imgDom.naturalHeight = sH;
				imgDom.naturalWidth = sH * whR;
			} else {
				//宽长
				imgDom.naturalWidth = sW;
				imgDom.naturalHeight = sW / whR;
			}
			let temp = {
				...item,
				eleType: "video",
				x: (sW - imgDom.naturalWidth) / 2,
				y: (sH - imgDom.naturalHeight) / 2,
				w: imgDom.naturalWidth,
				h: imgDom.naturalHeight,
				z: null,
				pageX: null,
				pageY: null,
				oldX: null,
				oldY: null,
				oldW: null,
				oldH: null
			};
			scene2.push(temp);
			this.$set(changjingitem, "scene2", scene2);
			this.updateElZIndex();
		},
		// 修改元素音量
		changeElVolume(ind, val) {
			let changjingitem = this.changjing[this.changjingAc];
			if (ind == "bgm") {
				console.log("修改元素音量", changjingitem.bgm, val);
				if (!changjingitem.bgm) {
					this.$set(changjingitem, "bgm", {
						volume: 40
					});
				}
				this.$set(changjingitem.bgm, "volume", val);
			} else {
				let changeEl = changjingitem.scene2[ind]; //获取替换元素
				this.$set(changjingitem.scene2[ind], "volume", val);
			}
		},
		// 修改元素层级
		changeZIndex(ind, num) {
			let changjingitem = this.changjing[this.changjingAc];
			// 判断元素是否可以修改层级
			let changeEl = changjingitem.scene2[ind]; //获取替换元素
			let newInd = ind + num; //计算新层级索引
			if (changjingitem.scene2[0].eleType == "bgi") {
				//判断是否有背景图
				if (newInd == 0) {
					tools.easyToast("素材层级不能低于背景图!");
					return;
				}
			}
			if (newInd == -1) {
				tools.easyToast("素材层级已最低!");
				return;
			}
			if (newInd == changjingitem.scene2.length) {
				tools.easyToast("素材层级已最高!");
				return;
			}
			// 元素替换
			let [el] = changjingitem.scene2.splice(ind, 1);
			changjingitem.scene2.splice(ind + num, 0, el);

			// 更新z属性
			this.updateElZIndex(changjingitem);

			// 更新当前元素索引
			let scene2CurrInd = changjingitem.scene2.findIndex((e) => e.id == el.id);
			changjingitem.scene2Ac = changjingitem.scene2Ac + num;
		},
		// 删除元素
		removeEl(ind) {
			let changjingitem = this.changjing[this.changjingAc];
			console.log("删除元素", changjingitem.scene2Ac);
			changjingitem.scene2.splice(ind, 1);
			this.$set(changjingitem, "scene2Ac", null);
			this.updateElZIndex();
			this.$refs.myDialogPopup.close();
		},
		// 更新元素z属性
		updateElZIndex() {
			let changjingitem = this.changjing[this.changjingAc];
			let scene2 = changjingitem.scene2;
			scene2.reduce((p, e, i) => {
				e.z = p;
				return p + 1;
			}, 0);
			this.$set(changjingitem, "scene2", scene2);
		},

		// AudioContext初始化
		initAudioContext() {
			if (!this.audioContext) {
				this.audioContext = uni.createInnerAudioContext();
				// this.audioContext.obeyMuteSwitch = false;
				this.audioContext.onCanplay((res) => {
					let changjingitem = this.changjing[this.changjingAc];
					if (changjingitem.audioDuration) return;
					this.pageLoading = true;
					if (!this.audioContext.duration || this.audioContext.duration == Infinity) {
						let tempCtx = uni.createInnerAudioContext();
						tempCtx.volume = 0;
						tempCtx.autoplay = true;
						tempCtx.src = changjingitem.audioSrc;
						console.log(tempCtx.src);
						tempCtx.onTimeUpdate((ctxres) => {
							console.log("tempCtx.onTimeUpdate", tempCtx.duration, ctxres);
							if (tempCtx.duration && tempCtx.duration != Infinity) {
								console.log("tempCtx.onCanplay1-1", tempCtx.duration);

								this.$set(changjingitem, "audioDuration", tempCtx.duration);
								this.pageLoading = false;
								tempCtx.stop();
							} else {
								console.log("tempCtx.onCanplay1-2", tempCtx.duration);
							}
						});
						tempCtx.onStop(() => {
							tempCtx.destroy();
						});
						tempCtx.onEnded(() => {
							tempCtx.destroy();
						});
					} else {
						console.log("this.audioContext.onCanplay2", this.audioContext.duration);
						let changjingitem = this.changjing[this.changjingAc];
						this.$set(changjingitem, "audioDuration", this.audioContext.duration);
						this.pageLoading = false;
					}
				});
				// this.audioContext.loop = true;
				this.audioContext.onPlay((res) => {
					this.audioPlaying = true;
					console.log("this.audioContext.onPlay", res);
				});
				this.audioContext.onPause((res) => {
					this.audioPlaying = false;
					this.audioContext.seek(0);
					this.audioCurrentTime = 0;
					console.log("this.audioContext.onPause", res);
				});
				this.audioContext.onEnded((res) => {
					this.audioPlaying = false;
					this.audioContext.seek(0);
					this.audioCurrentTime = 0;
					console.log("this.audioContext.onEnded", res);
				});
				this.audioContext.onStop((res) => {
					this.audioPlaying = false;
					this.audioContext.seek(0);
					this.audioCurrentTime = 0;
					console.log("this.audioContext.onStop", res);
				});
				this.audioContext.onSeeking((res) => {
					console.log("this.audioContext.onSeeking", this.audioContext.currentTime);
				});
				this.audioContext.onTimeUpdate((res) => {
					this.audioCurrentTime = this.audioContext.currentTime;
					console.log("this.audioContext.onTimeUpdate", this.audioContext.currentTime);
				});
			}
		},
		// 删除音频驱动
		delRecordingSrc() {
			let changjingitem = this.changjing[this.changjingAc];
			this.$set(changjingitem, "audioSrc", "");
			this.$set(changjingitem, "audioCont", "");
			this.$set(changjingitem, "audioDuration", 0);
			if (this.audioPlaying) {
				this.audioContext.stop();
			}
		},
		// 播放音频驱动
		onPlayTap() {
			if (!this.audioPlaying) {
				this.audioContext.play();
			} else {
				this.audioContext.pause();
			}
		},
		// 添加音频驱动
		async page3AddAudioSrc(payload) {
			let changjingitem = this.changjing[this.changjingAc];
			this.$set(changjingitem, "audioSrc", payload.src);
			this.$set(changjingitem, "audioDuration", 0);
			this.audioContext.src = payload.src;
			let content_res = await api.getAiworkobjv1ct({
				content: payload.src,
				obj: "a_obj"
			});
			console.log("添加音频驱动", content_res);
			if (content_res && content_res.data) {
				this.$set(changjingitem, "audioCont", content_res.data);
				let scene2CurrInd = changjingitem.scene2.findIndex((e) => e.eleType == "texts2");
				let content = content_res.data;
				let obj = await this.renderSubTitleObj(content, 12);
				if (changjingitem.scene2[scene2CurrInd]?.eleType != "texts2") {
					changjingitem.scene2.push(obj);
					changjingitem.scene2Ac = changjingitem.scene2.length - 1;
					this.updateElZIndex();
				} else {
					this.$set(changjingitem.scene2, scene2CurrInd, obj);
					changjingitem.scene2Ac = scene2CurrInd;
				}
			} else {
				if (this.subtitlesShow) {
					tools.easyToast("此音频无法生成字幕");
				}
				this.$set(changjingitem, "audioCont", "");
			}
		},

		// 修改文字
		async changeFont(payload) {
			let changjingitem = this.changjing[this.changjingAc];
			let scene2 = changjingitem.scene2[payload.currInd];
			if (!scene2?.sand) {
				return;
			}
			let obj = scene2;
			switch (payload.type) {
				case "changeFont": //修改文字
					obj.sand.fontname = payload.item.fontFile;
					obj.sand.fontFamily = payload.item.fontName;
					break;
				case "changeFontsize": //修改文字大小
					obj.sand.fontsize = payload.item;
					obj.sand.alignAc = null;
					break;
				case "changeFontLineSize": //修改文字描边大小
					obj.sand.lineWidth = payload.item;
					break;
				case "changeTextAlignListAc": //修改文字对齐方式
					let showBoxinfo = await tools.getNode(uni, ".show-box");
					let sW = showBoxinfo.width;
					let sH = showBoxinfo.height;
					obj.sand.alignAc = payload.item;
					switch (payload.item) {
						case 0:
							obj.x = 0;
							break;
						case 1:
							obj.x = (sW - obj.w) / 2;
							break;
						case 2:
							obj.x = sW - obj.w;
							break;
					}
					break;
				case "changeFontColor": //修改文字颜色
					let { r, g, b, a } = payload.item.val;
					switch (payload.item.field) {
						case "fontColor": //字体颜色
							obj.sand.primaryColour = tools.rgbToHex(r, g, b, a * 255);
							obj.sand.primaryColourVal = payload.item.val;
							break;
						case "fontBgColor": //背景颜色
							obj.sand.bgStyle = tools.rgbToHex(r, g, b, a * 255);
							obj.sand.bgStyleVal = payload.item.val;
							break;
						case "fontLineColor": //描边颜色
							obj.sand.strokeStyle = tools.rgbToHex(r, g, b, a * 255);
							obj.sand.strokeStyleVal = payload.item.val;
							break;
					}
					// obj.sand.fontsize = payload.item;
					break;
				case "changeFontContent": //修改文字内容
					this.footerBarList[7].pageAc = 0;
					this.$nextTick(() => {
						this.kuangIptVal = this.scene2[this.scene2CurrInd].content;
					});
					break;
				default:
					break;
			}
			let res = await this.getTextSize(obj.content, obj.sand, 1);
			obj.w = res.textWidth;
			obj.h = res.textHeight;
			let sW = obj.sW;
			let sH = obj.sH;
			switch (obj.sand.alignAc) {
				case 0:
					obj.x = 0;
					break;
				case 1:
					obj.x = (sW - obj.w) / 2;
					break;
				case 2:
					obj.x = sW - obj.w;
					break;
			}
			this.$set(changjingitem.scene2, payload.currInd, obj);
		},
		// 失焦事件
		blurText(value) {
			this.keyboardH = 0;
			let changjingitem = this.changjing[this.changjingAc];
			this.footerBarShow = true;
			if (value == "") {
				if (changjingitem.scene2Ac == null) return;
				changjingitem.scene2.splice(changjingitem.scene2Ac, 1);
				changjingitem.scene2Ac = null;
			} else {
				let item = changjingitem.scene2[changjingitem.scene2Ac];
			}
		},
		// 聚焦事件
		async focusText(value) {
			this.footerBarShow = false;
			let changjingitem = this.changjing[this.changjingAc];
			if (changjingitem.scene2[changjingitem.scene2Ac]?.eleType != "texts") {
				let content = value || "默认文本";
				let showBoxinfo = await tools.getNode(uni, ".show-box");
				let sW = showBoxinfo.width;
				let sH = showBoxinfo.height;
				const fn = (hex) => tools.hexToRgb(hex);
				let obj = {
					eleType: "texts",
					content: content,
					isText: true,
					lockSize: true,
					sW,
					sH,
					sand: {
						letterSpacing: "0",
						fontname: "alishuheiti.ttf",
						fontFamily: "速黑体",
						primaryColour: "#ffffffff",
						primaryColourVal: fn("#ffffffff"),
						fontsize: showBoxinfo.width * (1 / 10),
						fontsizeOld: 50,
						lineWidth: 0.5,
						lineWidthOld: 2,
						strokeStyle: "#000000ff",
						strokeStyleVal: fn("#000000ff"),
						bgStyle: "#ffffff00",
						bgStyleVal: fn("#ffffff00"),
						alignAc: 1
					},
					z: null,
					pageX: null,
					pageY: null,
					oldX: null,
					oldY: null,
					oldW: null,
					oldH: null
				};
				let res = await this.getTextSize(content, obj.sand, 1);
				obj.w = res.textWidth;
				obj.h = res.textHeight;
				obj.x = (sW - obj.w) / 2;
				obj.y = (sH - obj.h) / 2;
				/* // this.ctx.font = 'italic bold 40px'
					this.ctx.setFontSize(obj.sand.fontsize);
					obj.w = this.ctx.measureText(content).width;
					obj.h = obj.sand.fontsize;
					obj.x = (sW - obj.w) / 2;
					obj.y = (sH - obj.h) / 2; */

				changjingitem.scene2.push(obj);
				changjingitem.scene2Ac = changjingitem.scene2.length - 1;
				this.updateElZIndex();
			} else {
				console.log("编辑文本");
			}
		},
		// 点击输入框
		tapTextIpt() {
			this.keyboardH = 1;
		},
		// 获取文字大小
		async getTextSize(text, sand, scale) {
			this.getFontSizeVal = text;
			let style = {
				fontSize: sand.fontsize,
				fontFamily: sand.fontFamily,
				color: sand.primaryColour,
				background: sand.bgStyle,
				strokeWidth: 1,
				strokeColor: sand.strokeStyle
			};
			this.getFontSizeStyle = style;
			await new Promise((next) => this.$nextTick(next));
			let fontView = await tools.getNode(uni, ".getFontSizeView");
			// const canvas = document.createElement('canvas');
			return {
				textWidth: fontView.width,
				textHeight: fontView.height
			};
		},
		// 添加文本
		async addText(value) {
			let changjingitem = this.changjing[this.changjingAc];
			if (changjingitem.scene2[changjingitem.scene2Ac]?.eleType != "texts") {
				let obj = changjingitem.scene2[changjingitem.scene2.length - 1];
				obj.content = value;
				let res = await this.getTextSize(value, obj.sand, 1);
				obj.w = res.textWidth;
				obj.h = res.textHeight;
				obj.x = (obj.sW - obj.w) / 2;
				obj.y = (obj.sH - obj.h) / 2;
			} else {
				//编辑
				let obj = changjingitem.scene2[changjingitem.scene2Ac];
				obj.content = value;
				let res = await this.getTextSize(value, obj.sand, 1);
				obj.w = res.textWidth;
				obj.h = res.textHeight;
				let sW = obj.sW;
				let sH = obj.sH;
				switch (obj.sand.alignAc) {
					case 0:
						obj.x = 0;
						break;
					case 1:
						obj.x = (sW - obj.w) / 2;
						break;
					case 2:
						obj.x = sW - obj.w;
						break;
				}
			}
		},

		// 关闭一些弹出性组件
		closeSomeComp() {
			this.$refs.myDialogPopup.close();
		},
		// 获取视频帧视频组件播放事件
		getFrameVideoPlay(event, item, index) {}
	},
	computed: {
		// 秒数转时间
		seconds2time() {
			return (index_num) => {
				// tools.seconds2time;

				// let getHours = (parseInt(index_num / 60 / 60) % 12).toString().padStart(2, 0);
				// let getMinutes = (parseInt(index_num / 60)% 60).toString().padStart(2, 0);
				let getMinutes = parseInt(index_num / 60)
					.toString()
					.padStart(2, 0);
				let getSeconds = (index_num % 60).toFixed(2);
				if (getSeconds < 10) getSeconds = "0" + getSeconds;
				// let str = `${getHours}.${getMinutes}.${getSeconds}`;
				let str = `${getMinutes}:${getSeconds}`;
				return str;
			};
		}
	},
	watch: {
		myDialogPopupShow: {
			handler(val) {
				if (!val) {
					setTimeout(() => {
						let ind = this.footerBarList.findIndex((e) => e.ac == this.footerBarListAc);
						this.footerBarList[ind].pageAc = 0;
						this.footerBarListAc = null;
					}, 300);
				}
			}
		},
		speaker(val) {
			let ind = this.btnlist.findIndex((e) => e.id == 3);
			this.btnlist[ind].text = "配音：" + (val.dubName || "默认");
		}
	},
	async onLoad(opt) {
		this.initSystemInfo();
		this.initPageInfo(opt);
		this.initAudioContext();
		let getDataSucc = await this.getData();
		this.initChangjing();
	},
	onShow() {
		this.pageShow = true;
		this.getUserVipStatus();
		this.initCont();
	},
	onHide() {
		this.pageShow = false;
	},
	onUnload() {
		this.shiTingContCtx?.stop();
		this.audioContext?.stop();
	}
};
</script>

<style lang="scss">
::-webkit-scrollbar {
	width: 0vw !important;
	height: 0vw !important;
	display: none;
}

.createVideo {
	width: 100vw;
	// height: 100vh;
	background: #0c1411;
	position: relative;
	color: #fff;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	.back--btn {
		width: 8vw;
		padding-left: 3vw;
		padding-top: 3vw;
		position: absolute;
		left: 0;
		top: calc(2vh + 4vw);
		z-index: 6;
	}
	.title-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0vw 2vw;

		.back {
			width: 8vw;
			padding-left: 3vw;
			padding-top: 3vw;
		}

		.title {
			font-size: 36rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
		}
	}
	.submit-btn {
		position: absolute;
		right: 2vw;
		top: calc(4vh + 4vw);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 2.5vw;
		padding: 1.5vw 2.5vw;
		background: linear-gradient(217.51deg, #00ffae 0%, #1ba1fa 100%);
		box-sizing: border-box;
		margin-right: 2vw;
		&.ac {
			background: #00997f;
		}

		.icon {
			height: 152%;
			display: block;
			margin-right: 1vw;
		}

		.text {
			font-size: 3vw;
			color: #fff;
		}
	}
	.work-show {
		position: relative;
		z-index: 0;
		left: 0;
		margin-top: 1vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.secne2CanvasPic-class {
		position: absolute;
		z-index: -999;
	}
	.show-box {
		position: relative;
		// background: rgba(255, 255, 255, 0.068);
		overflow: hidden;
		.show-item {
			position: absolute;
			box-sizing: border-box;
			// box-sizing: border-box;
			--dot-size: 5.2vw;
			.pic {
				width: 100%;
				height: 100%;
				display: block;
			}
			.renderText {
				position: relative;
				--stroke-width: 0px;
				--stroke-color: #ffffff00;
				width: max-content;
				.stroke-text {
					width: 100%;
					height: 100%;
					-webkit-text-stroke: var(--stroke-width) var(--stroke-color);
					text-stroke: var(--stroke-width) var(--stroke-color);
					position: absolute;
					left: 0;
					top: 0;
					z-index: 0;
				}
				.text {
					position: relative;
					width: max-content;
					display: block;
					overflow: hidden;

					// -webkit-text-stroke: var(--stroke-width) var(--stroke-color);
					// &::after {
					// 	content: attr(data-content);
					// 	-webkit-text-stroke: var(--stroke-width) var(--stroke-color);
					// 	position: absolute;
					// 	left: 0;
					// 	top: 0;
					// 	z-index: -1;
					// }
				}
			}
			.dot {
				width: var(--dot-size);
				height: var(--dot-size);
				border-radius: 50%;
				background: #00deb9;
				position: absolute;
				&.d1 {
					left: calc(0vw - var(--dot-size) / 2);
					top: calc(0vw - var(--dot-size) / 2);
				}
				&.d2 {
					right: calc(0vw - var(--dot-size) / 2);
					top: calc(0vw - var(--dot-size) / 2);
				}
				&.d3 {
					left: calc(0vw - var(--dot-size) / 2);
					bottom: calc(0vw - var(--dot-size) / 2);
				}
				&.d4 {
					right: calc(0vw - var(--dot-size) / 2);
					bottom: calc(0vw - var(--dot-size) / 2);
				}
			}
		}
	}
	.getFontSizeView {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -999;
		width: max-content;
		height: max-content;
		--stroke-width: 0px;
		--stroke-color: #ffffff00;
		&::after {
			content: attr(data-content);
			-webkit-text-stroke: var(--stroke-width) var(--stroke-color);
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
		}
	}
	.bottom-view {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;

		.time-box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 1vw 4vw;
			box-sizing: border-box;
			background: #0c1411;

			.l {
				display: flex;
				align-items: center;

				.icon1 {
					width: 6vw;
				}

				.text {
					margin: 0vw 2vw;
					font-size: 3.6vw;
					color: rgba(255, 255, 255, 1);
				}
				.add-view {
					padding-right: 3vw;
					.add {
						width: 8vw;
						height: 6vw;
						opacity: 1;
						border-radius: 10px;
						background: rgba(0, 153, 127, 1);
						display: flex;
						justify-content: center;
						align-items: center;

						.icon2 {
							width: 40%;
						}
					}
				}
			}

			.r {
				display: flex;
				align-items: center;

				.text {
					font-size: 4vw;
				}

				.switch {
				}

				.icon2 {
					width: 8vw;
				}
			}
		}
		.changjing-list {
			display: -webkit-box;
			box-sizing: border-box;
			overflow: auto;
			padding: 1.5vw 4vw;
			border-bottom: 1px solid rgba(34, 48, 44, 1);
			--item-height: 3.3vh;
			--item-width-size: 16vw;
			--border-radiu-val: 2vw;
			width: max-content;
			min-width: 100%;

			.changjing-item {
				height: var(--item-height);
				width: calc(var(--item-height) * 16 / 9);
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: var(--border-radiu-val);
				border: 1px solid rgba(0, 153, 127, 1);
				box-sizing: content-box;
				overflow: hidden;
				margin-right: 1.5vw;
				position: relative;
				&.ac {
					border: 2px solid rgba(0, 222, 185, 1);

					.del {
						display: block;
					}
				}
				.del {
					width: 3vw;
					height: 3vw;
					position: absolute;
					top: 1vw;
					right: 1vw;
					display: none;

					.del-icon {
						width: 100%;
						height: 100%;
						display: block;
					}
				}
			}

			.changjing-item-add {
				width: calc(var(--item-height) * (9 / 16));
				height: calc(var(--item-height));
				// background: linear-gradient(270deg, rgba(0, 222, 185, 1) 0%, rgba(122, 255, 233, 1) 100%);
				border: 2px solid rgba(0, 222, 185, 1);
				border-radius: var(--border-radiu-val);
				box-sizing: content-box;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;

				.icon {
					width: 50%;
					height: 50%;
					display: block;
				}
			}
		}
		.yuliao {
			flex: 1;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			.page3-bottom {
				width: 100%;
				// height: 30vh;
				flex: 1;
				background: #0e1c18;
				display: flex;
				flex-direction: column;
				overflow: hidden;
				.page3-b-btns {
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					padding: 2.5vw;
					height: 6.6vh;
					border-bottom: 1px solid rgba(34, 48, 44, 1);

					.l {
						flex: 1;
						display: -webkit-box;
						justify-content: flex-end;
						box-sizing: border-box;
						max-width: 100%;
						overflow: auto;
						.btn {
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 2.5vw;
							padding: 0vw 2.5vw;
							background: rgba(255, 255, 255, 0.08);
							box-sizing: border-box;
							margin-right: 2vw;
							&.ac {
								background: #00997f;
							}

							.icon {
								max-width: 7vw;
								height: 7vw;
								width: 7vw;
								display: block;
								margin-right: 1vw;
							}

							.text {
								font-size: 3vw;
								color: rgba(255, 255, 255, 1);
							}
						}
					}
					.r {
						flex: 1;
						display: -webkit-box;
						justify-content: flex-end;
						box-sizing: border-box;
						max-width: 100%;
						overflow: auto;

						.btn {
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 2.5vw;
							padding: 3vw 1.5vw;
							background: rgba(255, 255, 255, 0.08);
							box-sizing: border-box;
							margin-right: 2vw;
							height: 8.6vw;
							&.ac {
								background: #00997f;
							}

							.icon {
								max-width: 7vw;
								height: 5vw;
								width: 4vw;
								display: block;
								margin-right: 1vw;
							}

							.text {
								font-size: 3vw;
								color: rgba(255, 255, 255, 1);
							}
						}
					}
				}

				.cont {
					flex: 1;
					position: relative;
					display: flex;
					flex-direction: column;
					overflow: hidden;
					.textarea-box {
						width: 100%;
						flex: 1;
						position: relative;
						padding: 2.5vw;
						padding-top: 0;
						padding-bottom: 10vw;
						box-sizing: border-box;
						overflow: hidden;
						.cont-textarea {
							width: 100%;
							height: 100%;
							font-size: 4.6vw;
							// max-height: 200px;
							color: rgba(255, 255, 255, 1);
						}
						.number {
							position: absolute;
							border-radius: 2vw;
							padding: 1vw 1.5vw;
							color: rgba(126, 126, 126, 1);
							background: rgba(255, 255, 255, 0.086);
							right: 2vw;
							bottom: 2vw;
						}
					}

					.cont-btns {
						width: 100%;
						display: flex;
						justify-content: flex-end;
						padding: 2.5vw;
						box-sizing: border-box;

						.btn {
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 2.5vw;
							padding: 1.5vw 2.5vw;
							background: rgba(255, 255, 255, 0.08);
							box-sizing: border-box;
							margin-left: 2vw;

							.icon {
								max-width: 6vw;
								height: 86%;
								display: block;
								margin-right: 1vw;
							}

							.text {
								font-size: 4vw;
								color: rgba(255, 255, 255, 1);
							}
						}
					}

					.audio-box {
						width: 96%;
						margin: 2vw auto;
						position: relative;
						border-radius: 2.5vw;
						background: rgba(126, 126, 126, 0.168);
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						box-sizing: border-box;
						padding: 2.5vw;

						.audio-cont {
							width: 100%;
							display: flex;
							justify-content: center;
							align-items: center;
							.info {
								flex: 1;
								font-size: 3.5vw;
								.name {
									color: #fff;
									margin-bottom: 1vw;
								}
								.time {
									color: rgba(255, 255, 255, 0.168);
								}
							}
							.btns {
								display: flex;
								justify-content: center;
								align-items: center;
								.item {
									width: 8.6vw;
									margin-right: 1.5vw;
									&.del {
										width: 6.8vw;
									}
									.icon {
										width: 100%;
										display: block;
									}
								}
							}
						}

						.rate-box {
							margin-top: 5vw;
							width: 100%;
						}
					}

					.showRecordView {
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						.icon {
							width: 8%;
							margin-bottom: 2vw;
						}

						.text {
							color: #fff;
							font-size: 3.6vw;
							text-align: center;
						}
					}
				}
			}
		}
		.footer-bar {
			display: -webkit-box;
			height: 15vw;
			background: #1b302c;
			overflow: auto;
			position: relative;
			z-index: 98;
			font-size: 3vw;

			.footer-bar-item {
				width: 17vw;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				&.ac {
					.text {
						color: #00997f;
					}
				}

				.icon {
					width: 4.6vw;
					height: 4.6vw;
					display: block;
					margin-bottom: 1vw;
				}

				.text {
					color: #fff;
				}
			}
		}
	}
	.toMakeAvatar {
		position: absolute;
		left: 0vw;
		top: 22vw;
		width: 7.5vw;
		.pic {
			width: 100%;
		}
	}
	.page3popup-view {
		width: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 2vw;
		overflow: auto;
		background: linear-gradient(180deg, #244343 0%, #22252b 100%);
		border-radius: 3vw 3vw 0 0;
		.text-box {
			margin-bottom: 5vw;

			.text1 {
				color: #fff;
				font-size: 4vw;
			}

			.text2 {
				margin-top: 2vw;
				font-size: 3vw;
				color: #7c7c7c;
			}
		}
		.cont-list {
			.cont-item {
			}
		}
		.btns {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			.btn {
				// width: 46.8%;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 15vw;
				margin: 5.2vw 0vw;
				border-radius: 2.5vw;
				font-weight: bold;
				&:nth-child(1) {
					margin-right: 1vw;
				}
			}
			.style1 {
				background: #313133;
				color: #fff;
			}
			.style2 {
				background: linear-gradient(180deg, #6edc9a 0%, #05ecbd 100%);
				color: #000;
				margin-left: 1vw;
			}
		}

		.popup-title {
			padding-top: 5vw;
			color: #fff;
			text-align: center;
		}
		.popup-main {
			height: 68vh;
			overflow: auto;
			box-sizing: border-box;
			padding: 2vw;
			.cont-list {
				.item {
					background: rgba(126, 126, 126, 0.186);
					box-sizing: border-box;
					padding: 5vw;
					border-radius: 2.5vw;
					width: 100%;
					margin-bottom: 3vw;
					color: #fff;
					font-size: 3.68vw;
					font-weight: 100;
					text-indent: 2em;

					&.ac {
						border: 1vw solid #98c379;
					}
				}
			}
			.opt-list {
				.item {
					width: 100%;
					margin-bottom: 6vw;
					.title {
						color: #fff;
						font-size: 3.68vw;
						font-weight: 100;
					}
					.slider {
					}
				}
			}
		}
		.people-subBtn {
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(180deg, #6edc9a 0%, #05ecbd 100%);
			width: 90%;
			height: 15vw;
			margin: 5.2vw auto;
			border-radius: 2.5vw;
			color: #000;
			font-weight: bold;
		}

		.audio-list {
			// flex: 1;
			overflow: auto;
			display: -webkit-box;

			.audio-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 0vw 1vw;
				height: max-content;
				border-radius: 1.5vw;

				&.ac {
					border: 1px solid #00deb9;
				}

				.left {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					height: 100%;

					.pic-box {
						width: 20vw;
						height: 100%;
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;

						.audio-pic {
							width: 15vw;
							height: 15vw;
							display: block;
							border-radius: 50%;
						}

						.playStatusIcon {
							position: absolute;
							left: 0vw;
							top: 0vw;
							width: 100%;
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;

							.icon {
								width: 8.6vw;
								height: 8.6vw;
								display: block;
							}
						}
					}

					.date-time {
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
					}
				}

				.right {
					display: none;
					justify-content: center;
					align-items: center;
					height: 100%;

					.time {
					}

					.icon {
						width: 5vw;
						height: 5vw;
						display: block;
						padding: 0vw 3vw;
					}

					.useBtn {
						background: linear-gradient(270deg, #00deb9 0%, #7affe9 100%);
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 100vw;
						padding: 1vw 2vw;

						.useBtn-text {
							font-size: 3.5vw;
							color: #111;
						}
					}
				}
			}
		}
	}

	.getFrame {
		position: absolute;
		z-index: 1;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		.item {
			flex: 1;
			.getFrameVideo {
				height: 100%;
			}
		}
	}
}
</style>
